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

当隐藏区域显示时，我想隐藏另一个隐藏区域(如果它可见)？我想这样做，以便我可以添加其他 header 和隐藏区域(如果需要)。

更新:

谢谢大家，最终做到了这一点:

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

Answer 1

假设在呈现表单时您有一个可见的隐藏区域，这将起作用。另请注意，您不需要 next 方法中的过滤器，因为 next 只会为您提供下一个同级。

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