Question

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

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

一旦打开，我希望用户能够关闭它，所以我尝试使用.is（'：visible'）函数，然后将我的原始代码包装在if语句中，但这一次使用{{1 }}

display:none;

这似乎不起作用，我没有得到任何我知道的语法错误。

我也试过这个：

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

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

}

......但这也不起作用。

Answer 1

您可以使用toggle功能：

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

如果当前隐藏了'.field-group-format-wrapper'元素，则会显示这些元素，如果它们当前可见，则隐藏它们。

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

Answer 2

我猜你的函数只在页面加载时被调用，此时所有的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();

Answer 3

如前所述，您可以使用toggle功能来实现您的目标。

要添加一些额外信息，在附加您正在执行的事件时，您实际上正在使用订阅模型。

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

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

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

3 个答案: