Question

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

<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>

jquery show / hide accordion - 如果打开，关闭打开项目

2 个答案: