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

估计是兄弟姐妹的问题。帮助？

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');
        }
    });
});​

小提琴