Question

我有以下标记：

<div class="header">Text</div>
<div class="hiddenArea">sdsada</div>

<div class="header">Text2</div>
<div class="hiddenArea">sdsada</div>

以及以下jQuery：

$('.header').click(function() {
        var t = $(this).next('.hiddenArea').slideToggle();
    });

当hiddenArea被显示时，如果它可见，我想隐藏其他hiddenArea？我想这样做，以便我可以在需要时添加其他标题和hiddenAreas。

更新

谢谢大家，最后这样做了：

$('#messages .header').click(function() {
  if (!$(this).next().is(':visible')) {
    $('.hiddenArea').slideToggle();
  }
});

Answer 1

假设在呈现表单时有一个hiddenArea可见，这将起作用。另请注意，您不需要在下一个方法中使用过滤器，因为下一个方法只会为您提供下一个兄弟。

$('.header').click(function() {
    var $el = $(this);
    if ( ! $el.next().is('visible') ){
       $('div.hiddenArea:visible').slideUp( function(){
           var t = $el.next().slideDown();
       });
    }
});

Answer 2

谢谢大家，最后这样做了：

$('#messages .header').click(function() {
        if (!$(this).next().is(':visible')) {
            $('.hiddenArea').slideToggle();
        }
    });

使用jQuery切换元素可见性！

更新

2 个答案: