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>

我打开一个问题，如果打开另一个问题就关闭（这就是我想要的）。但是当我在div中包装h2和.answer时，它不起作用。像：

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

FIDDLE

兄弟姐妹问题 - 打开1时关闭所有打开的面板

1 个答案: