jquery - 兄弟问题 - 当打开 1 个面板时关闭所有打开的面板

Question

如果我有这个 html:

<div class="main cat_info">
<h2>Question 1?</h2>
  <div class="answer">
    <p>bla bla bla</p>
  </div>
  <h2>question 2</h2>
  <div class="answer">
    <p>bla bla bla</p>
  </div>
  <h2>Question 3?</h2>
  <div class="answer">
    <p>bla bla bla</p>
  </div>
</div>

我打开一个问题，如果打开另一个问题，它就会关闭(这就是我想要的)。但是当我将 h2 和 .answer 包装在 div 中时，它不起作用。喜欢:

<div class="main cat_info">
  <div class="holder">
<h2>Question 1?</h2>
  <div class="answer">
    <p>bla bla bla</p>
  </div>
</div>
<div class="holder">
  <h2>question 2</h2>
  <div class="answer">
    <p>bla bla bla</p>
  </div>
</div>
  <div class="holder">
  <h2>Question 3?</h2>
  <div class="answer">
    <p>bla bla bla</p>
  </div>
</div>
</div>

这是 jquery:

$(document).ready(function() {
$('.answer').hide();
$('.cat_info h2').on('click', function() {
    var state = $(this).next('.answer').is('.open');
    if (state) {
        $(this).removeClass('active').next('.answer').removeClass('open').fadeOut();
    }else{
        $(this).addClass('active').next('.answer').addClass('open').slideDown()
               .siblings('.answer').removeClass('open').slideUp().end()
               .siblings('h2').not(this).removeClass('active');
    }
    });
});

我猜这是 sibling 的问题。帮忙？

Answer 1

有了这个标记，它可能看起来像:

$(document).ready(function() {
    $('.answer').hide();
    $('.cat_info h2').on('click', function() {
        var state = $(this).is('.active');
        if (state) {
            $(this).removeClass('active').next('.answer').fadeOut();
        } else {
            $(this).addClass('active').next('.answer').slideDown()
                   .closest('.holder').siblings('.holder').find('.answer').slideUp().end()
                   .find('h2').not(this).removeClass('active');
        }
    });
});​

FIDDLE