Bootstrap 单击按钮折叠所有手风琴

Question

有没有办法 collapse/expand 所有的手风琴都可以通过单击按钮来实现？我用一个简单的按钮尝试了它，removeClass active 和 addClass active 但它根本不起作用。只能一下子全部打开，不能再崩溃再打开。

我当前的按钮：

$("#collapseAll").click( function() {
    $(".accordion-header").removeClass("active").addClass("active");
});

我的 js:

$('.js-accordion dt, .js-toggle').on('click tap', function(){
    $($(this).data('target') ? $(this).data('target') : $(this)).toggleClass('active');
});

和我的html

<dl class="accordion js-accordion" data-toggle="accordion-header">
    {{#each accordion}}
    <div id="{{anchor}}-div">
        <dt class="accordion-header{{#if active}} active{{/if}}">
            <h3 class="accordion-item-title"{{#if anchor}} id="{{anchor}}"{{/if}}>{{{title}}}</h3>
            <span class="accordion-item-icon"></span>
        </dt>
        <dd class="accordion-body">
            <div class="accordion-item-content">
                {{#if textblock}}
                    {{#each textblock}}
                        <p>{{{.}}}</p>
                    {{/each}}
                {{/if}}
                <p>{{#if anchor}}<a href="#{{anchor}}" class="faq-anchor">{{../../page-contents.section-main.texts.permalink}}</a>{{/if}}</p>
                <p><a href="#top">{{../../page-contents.section-main.texts.to_top}}</a></p>
            </div>
        </dd>
    </div>
    {{/each}}
</dl>

Answer 1

这段代码是我自己做的

$("#collapseAll").click( function() {
        let button = document.getElementById("collapseAll");
        if(!$('.accordion-header').hasClass("active")){
            $('.accordion-header').removeClass("active").addClass("active");
            button.innerHTML = 'Collapse all'

        } else {
            $('.accordion-header').addClass("active").removeClass("active");
            button.innerHTML = 'Expand all'
        }
    });

还可以更改按钮文本！

Bootstrap 单击按钮折叠所有手风琴

Bootstrap collapse all accordions on button click

html

javascript

bootstrap-4