可见性：可见/隐藏的 div

Question

如何在点击按钮时显示一个div，并在关闭按钮上隐藏它？我的jQuery代码如下：

$(".imageIcon").click(function(){
$('.imageShowWrapper').css("visibility", 'visible');
});
 $(".imageShowWrapper").click(function(){
$('.imageShowWrapper').css("visibility", 'hidden');
});

除了问题，我遇到的情况是它自动关闭而没有任何点击。它加载一切都好，显示约1/2秒然后关闭。有什么想法吗？

- Scott Robertson

Answer 1

您可以使用 show 和 hide 方法：

$(".imageIcon").click(function() {
    $('.imageShowWrapper').show();
});

$(".imageShowWrapper").click(function() {
    $(this).hide();
});

- Ram

---

嘿，感谢您的回复。我想先隐藏div，我需要使用相同的hide()函数还是可以直接使用CSS的visibility属性？ - Scott Robertson

@Scott Robertson，欢迎您，您可以在事件处理程序之外隐藏div，使用hide将display:none设置为元素。 - Ram

可能我没有正确地实现它，我仍在学习很多这方面的东西。在我的CSS文件中，我将display:none放置在imageShowWrapper属性中，但现在Jquery不会影响该div。 - Scott Robertson

我的脚本显然有其他问题导致它无法正常工作，感谢所有的回复。 - Scott Robertson

Answer 2

根据您的要求，我相信您需要的内容就是这么简单：http://jsfiddle.net/linmic/6Yadu/。但是，使用visibility和show/hide功能是不同的，具体细节请参考这里。

- Linmic

---

这正是我想要的，而且基本上就是我的原始代码，只是出于某种原因它不起作用。谢谢回复。 - Scott Robertson

Answer 3

另一个选项：

$(".imageIcon, .imageShowWrapper").click(function() {  
    $(".imageShowWrapper").toggle($(this).hasClass('imageIcon'));     
});

您也可以使用fadeToggle和slideToggle。

- brains911

Answer 4

使用淡入淡出方法，您将获得更流畅的过渡效果：

var imageIcon = $(".imageIcon"),
    imageShowWrapper = $(".imageShowWrapper");

imageIcon.on("click", function(){
  imageShowWrapper.stop().fadeIn();
});

imageShowWrapper.on("click", function(){
   $(this).stop().fadeOut();
});

演示：http://jsbin.com/uhapom/edit#javascript,html,live

- Sampson

Answer 5

$(".imageIcon, .imageShowWrapper").click(function(){
    $('.imageShowWrapper').toggle();
});

- arychj

Answer 6

很难在没有看到你的HTML和jQuery代码的情况下说出来。但是，看起来显示/隐藏div的部分受到页面重新加载的影响？你可能将显示/隐藏div的代码放在$(document).ready(function() { .....})块内。此外，另一个相关的要点是，每当像按钮、锚点等HTML元素被点击时，点击被认为是默认类型=提交，并且在这种情况下页面也会重新加载。为了防止这种情况发生，可以使用event.preventDefault()。

- Binita Bharati