jquery显示/隐藏手风琴 - 如果打开则关闭打开的项目

Question

好吧，这可能是一个令人困惑的标题，基本上我已经做了一个常见问题显示/隐藏功能，它将关闭所有打开的项目，然后打开您刚刚单击的项目。但是，如果您再次单击它的标题，我需要它来关闭您打开的项目（如果这有意义？）

<div class="faq">
  <hr />
  <h3><a href="#item-1">question 1</a></h3>
  <div id="item-1" class="items">
    answer 1
  </div>
  <hr />
  <h3><a href="#item-2">question 2</a></h3>
  <div id="item-2" class="items">
    answer 2
  </div>
  <hr />
  <h3><a href="#item-3">question 3</a></h3>
  <div id="item-3" class="items">
    answer 3
  </div>
  <hr />
  <h3><a href="#item-4">question 4</a></h3>
  <div id="item-4" class="items">
    answer 4
  </div>
</div>

<script>
$(document).ready(function(){
    $('.faq h3 a:not(.open)').click(function(e){
        e.preventDefault();
        $(this).addClass('open');
        var faq = $.attr(this,'href').substr(1);
        $('.faq .items').slideUp('fast');
        $('.faq #'+faq).slideDown('fast',function(){
            $('html,body').animate({scrollTop:$('[id="'+faq+'"]').offset().top-60},750);
        });
    });
    $('.faq h3 a.open').click(function(e){
        e.preventDefault();
        $('.faq .items').slideUp('fast');
        $(this).removeClass('open');
    });
});
</script>

所以如果我点击问题 3，它就会打开，如果我再次点击它，它就会关闭。但如果我点击问题 2，它会关闭问题 3 并打开问题 2。

我尝试添加一个开放课程，但它忽略了它。

Answer 1

目前您使用的称为“直接”绑定，它只会附加到您的代码进行事件绑定调用时页面上存在的元素。

在操作选择器（如删除和添加类）时，使用.on() 方法和Event Delegation 方法。

$('.faq h3').on('click', 'a:not(.open)', function(e){
    e.preventDefault();
    $(this).addClass('open');
    var faq = $.attr(this,'href').substr(1);
    $('.faq .items').slideUp('fast');
    $('.faq #'+faq).slideDown('fast',function(){
        $('html,body').animate({scrollTop:$('[id="'+faq+'"]').offset().top-60},750);
    });
});
$('.faq h3').on('click', 'a.open', function(e){
    e.preventDefault();
    $('.faq .items').slideUp('fast');
    $(this).removeClass('open');
});

---

但是您可以将代码简化为

$(document).ready(function() {
  $('.faq h3 a').on('click', function(e) {
    e.preventDefault();
    var nextItem = $(this).parent().next('.items');
    $('.faq .items').not(nextItem).slideUp('fast');
    nextItem.slideDown('fast', function() {
      if (nextItem.is(':visible')) {
        $('html,body').animate({
          scrollTop: nextItem.offset().top - 60
        }, 750);
      }
    });
  });
});

.items {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
  <hr />
  <h3><a href="#item-1">question 1</a></h3>
  <div id="item-1" class="items">
    answer 1
  </div>
  <hr />
  <h3><a href="#item-2">question 2</a></h3>
  <div id="item-2" class="items">
    answer 2
  </div>
  <hr />
  <h3><a href="#item-3">question 3</a></h3>
  <div id="item-3" class="items">
    answer 3
  </div>
  <hr />
  <h3><a href="#item-4">question 4</a></h3>
  <div id="item-4" class="items">
    answer 4
  </div>
</div>

Answer 2

试试这个代码可能会有所帮助：

JQuery 代码：

$(document).ready(function(){
    $('.item h3').click(function(){
        $(this).siblings('.items').slideToggle();
    })
});

HMTL 标记：

    <div class="faq">
        <hr />
        <div class="item">
            <h3><a href="#item-1">question 1</a></h3>
            <div id="item-1" class="items">
                answer 1
            </div>
            <hr />
        </div>
        <div class="item">
            <h3><a href="#item-2">question 2</a></h3>
            <div id="item-2" class="items">
                answer 2
            </div>
            <hr />
        </div>
        <div class="item">
            <h3><a href="#item-3">question 3</a></h3>
            <div id="item-3" class="items">
                answer 3
            </div>
            <hr />
        </div>
        <div class="item">
            <h3><a href="#item-4">question 4</a></h3>
            <div id="item-4" class="items">
                answer 4
            </div>
        </div>
    </div>