javascript - 单击javascript关闭 Accordion

Question

我试图在打开 Accordion 元素后在下一次点击时关闭 Accordion 。鉴于我目前的设置方式(如下)，实现此目标的最佳方法是什么？我的代码如下:

HTML:

<div class="faq-accordion">                  
    <section id="1">
        <h4><a href="#1">Accordion Title</a></h4>
        <div>
            <p>Accordion Content</p>
         </div>
     </section>
</div>

Javascript:

$(document).ready(function(){

    $('.faq-accordion h4').click(function(){
        if( $(this).next().is(':hidden') ) {
            $('.faq-accordion h4').removeClass('faq-active').next().slideUp();      
            $(this).addClass('faq-active').next().slideDown();
        }
        return false;
    });
});

Answer 1

你可以这样做:

(function($) {

  var accordions = $('.accordion .content').hide();

  $('.accordion .header > a').click(function() {
    accordions.slideUp();
    if($(this).parent().next().is(':visible')) {
        $(this).parent().next().slideUp();
    } else {
        $(this).parent().next().slideDown();
    }
    return false;
  });

})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
  <div class="header"><a href="">Accordion title 1</a></div>
  <div class="content">Content 1</div>

  <div class="header"><a href="">Accordion title 2</a></div>
  <div class="content">Content 2</div>

  <div class="header"><a href="">Accordion title 3</a></div>
  <div class="content">Content 3</div>
</div>

如果您有任何问题，请告诉我。

希望对你有帮助。