3

我有一个 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'});
});

...但这也不起作用。

4

3 回答 3

5

您可以只使用切换功能：

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

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

仅供参考，您的问题中的代码片段不起作用的原因是因为您只是在 dom 就绪时检查元素的可见性，而不是在每次单击时检查 - 因此永远不会附加显示元素的事件处理程序。

于 2012-06-06T15:24:39.847 回答
1

我猜你的函数只在页面加载时被调用，此时所有 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-06T15:28:01.947 回答
1

如前所述，您可以使用切换功能来实现您想要的。

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

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

虽然事情实际上并没有导致您的问题，但值得注意。

于 2012-06-06T15:29:02.803 回答