可见性：可见/隐藏div

Question

单击按钮然后用关闭按钮隐藏它时显示div的最佳方法是什么？

我的Jquery代码如下：

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

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

Answer 1

您可以使用show和hide方法：

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

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

Answer 2

根据您的要求，我相信您需要的就是这样简单： http ： //jsfiddle.net/linmic/6Yadu/

但是，使用可见性不同于使用show / hide功能，gory细节： visibility：hidden和display：none之间有什么区别？

Answer 3

另外一个选项：

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

您还可以使用fadeToggle和slideToggle

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

Answer 5

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

Answer 6

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