Question

我有这个jquery代码，它在一个元素中添加了一个'close'类和幻灯片，但我希望所有其他代码在打开其中一个时关闭。因此，如果我点击打开其中一个，我希望其他开放的关闭，但我不能这样做。 HTML：

<div class="main">
<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>

我有这个jquery：

$(document).ready(function() {
 $('.answer').hide();
 $('.main h2').toggle(
    function() {
       $(this).next('.answer').slideDown();
       $(this).addClass('close');

    },
    function() {
       $(this).next('.answer').fadeOut();
       $(this).removeClass('close');
  }
    ); // end toggle
}); // end ready
</script>

我尝试将其添加到第一个功能，但点击它只是向下滑动然后向上。

$('.main .answer').not(this).slideUp();

Answer 1

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

FIDDLE

仅供参考：toggle()使用deprecated

崩溃面板 - 如何打开一个但关闭其他人

1 个答案: