JQuery if .is(':visible')的语句不起作用

Question

我有一个div,当页面加载时设置为display:none;.我可以使用这个简单的代码打开它:

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

一旦它打开,我希望用户能够关闭它,所以我尝试使用.is(':visible')函数,然后将我的原始代码包装在if语句中,但这次使用 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'});
});

......但那也没有用.

Answer 1

你可以使用切换功能:

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

这将显示'.field-group-format-wrapper'当前隐藏的元素,如果它们当前可见则隐藏它们.

仅仅因为您的问题中的代码片段不起作用的原因是因为您只是检查dom上的元素的可见性,而不是每次点击 - 因此显示元素的事件处理程序将永远不会附加.