使用jQuery切换元素可见性！

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可见，那么它将起作用。 还要注意，您不需要在next方法内使用过滤器，因为next仅会给您下一个兄弟。

$('.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();
        }
    });