單擊 javascript 時關閉手風琴

Question

在打開手風琴項目后，我試圖在下一次單擊時關閉手風琴。 鑒於我目前的設置方式（如下），實現這一目標的最佳方法是什么？ 我的代碼如下：

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>

如果您有任何問題，請告訴我。

我希望它有幫助。