JQuery if .is（'：visible'）语句不起作用

我有一个div，当页面加载时设置为display:none;。JQuery if .is（'：visible'）语句不起作用

$(".field-group-format-toggler").click(function() 
{ 
$(".field-group-format-wrapper").css({'display':'block'}); 
});

一旦它打开，我希望用户能够关闭它，所以我用。是（“：可见”）的尝试：函数，然后包装，我可以用这个简单的代码打开它我在原来的代码，如果statment但这次使用display:none;

if($('.field-group-format-wrapper').is(':visible')){ 

    $(".field-group-format-toggler").click(function() 
    { 
    $(".field-group-format-wrapper").css({'display':'none'}); 
}); 

}

这似乎并没有工作，虽然，我没有得到任何语法错误，我知道的。

我也试过这样：

if ($('.field-group-format-wrapper').is(':visible')) 
$(".field-group-format-toggler").click(function() { 
$(".field-group-format-wrapper").css({'display':'none'}); 
});

...但是，这也不能工作。

来源

2012-06-06 Danny Englander

您可以只使用toggle功能：

$(".field-group-format-toggler").click(function() 
{ 
    $(".field-group-format-wrapper").toggle(); 
});

这将显示'.field-group-format-wrapper'元素;如果当前隐藏，隐藏他们，如果他们是当前可见。

仅供参考您的代码片段在您的问题不起作用的原因是因为您只检查dom准备好的元素的可见性，而不是每次点击 - 所以显示元素的事件处理程序永远不会连接。

来源

2012-06-06 15:24:39

完美，谢谢，这真的减少了我的杂乱代码！我会接受，但只是有一个消息，我需要等待11分钟。 –

我想你的功能只在页面加载时被调用，此时所有的div都被隐藏。

为什么不检查点击事件处理程序中的可见性？

$('.field-group-format-toggler').click(function(){ 
    var $wrapper = $('.field-group-format-wrapper'); //Maybe $(this).parent()? 
    if($wrapper.is(':visible')) 
    $wrapper.hide(); 
    else 
    $wrapper.show();

来源

2012-06-06 15:28:01 Thomas

如前所述，您可以使用toggle函数来实现您想要的功能。

要添加一些额外的信息，当您像附加事件一样附加事件时，实际上是使用订阅模型。

注册一个事件将其放入订阅该处理程序的事件队列中。在这种情况下，当添加第二个事件来更改CSS时，您将添加一个事件，而不是覆盖第一个事件。

虽然事情并没有真正引起你的问题，但值得注意。

来源

2012-06-06 15:29:02

JQuery if .is（'：visible'）语句不起作用

回答

相关问题