使用 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();
        }
    });