如何使用 jQuery 关闭嵌套的手风琴答案

【问题标题】：How to close nested accordion with jQuery如何使用 jQuery 关闭嵌套的手风琴
【发布时间】：2019-09-27 15:14:39
【问题描述】：

我有两个嵌套的手风琴，一切都按照我的意愿运行。然而，我的最后一步是让主手风琴在单击时关闭所有东西，当再次单击 MAIN 按钮时，我很难选择要关闭的内部手风琴......这是带有一个内部手风琴的手风琴示例

HTML：

   <!--accordion-->
            <button class="btn-reset-styles faq-accordion-btn" type="button" data-toggle="collapse"
                    data-target="#faqCollapse"
                    aria-expanded="false" aria-controls="faqCollapse">
                Hello, how may I assist you?
                <i class="fas fa-angle-right"></i>
                <i class="fas fa-angle-down d-none"></i>
            </button>
            <div class="collapse" id="faqCollapse">
                <div class="accordion-content accordion-content--body">


                    <!--inner accordion parent-->
                    <div id="faq-inner-accordion">
                        <!--accordion blocks-->
                        <div class="accordion-link-block" data-toggle="collapse" data-target="#collapseOne" role="button"
                             aria-expanded="false" aria-controls="collapseOne">
                            <!--accordion inner collapse block-->
                            <div class="accordion-link-block--inner">
                                <p>Do you offer a Prescription Assistance Program for LATUDA?</p>
                                <div class="btn-reset-styles btn-arrow-right">
                                    <i class="fas fa-angle-right"></i>
                                    <i class="fas fa-angle-down d-none"></i>
                                </div>
                            </div>
                            <div class="collapse" id="collapseOne" data-parent="#faq-inner-accordion">
                                <div class="inner-accordion-answer">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat!
                                </div>
                            </div>
                         </div>
                       </div>

jquery：

  $(document).ready(function () {

    //accordion btn
    $($faqAccordionBtn).on('click', function () {
        $(this).toggleClass('no-bottom-radius');
        $(this).find('i').toggleClass('fa-angle-right').toggleClass('fa-angle-down');
    });

    //accordion arrow right button inner content
    $($innerAccordionLink).on('show.bs.collapse', function (e) {
        toggleIcon.call(this);
        $(this).find('.collapse').collapse('hide');
    });

    $($innerAccordionLink).on('hide.bs.collapse', function (e) {
        toggleIcon.call(this);
    });
});
/* end doc.ready */

 //toggle arrow right / down
function toggleIcon() {
    $(this).find('i').toggleClass('fa-angle-right').toggleClass('fa-angle-down');
}

【问题讨论】：

$faqAccordionBtn is not defined jsfiddle.net/isherwood/y1pvncqz/1
您可能希望将 Bootstrap 资产添加到该小提琴中，以便您的折叠方法正常工作。

标签： jquery html css

【解决方案1】：

如果有人在寻找这个，在 2021 年关闭所有手风琴，您只需使用以下命令（注意 -1）

$('.yourAccordion').accordion("option", "active", -1);

要关闭所有嵌套的手风琴，您可以使用单独的类，然后使用以下代码。

            jQuery('.parentAccordion, .childAccordion').accordion({
                collapsible: true,
                active: false,
                heightStyle: 'content'
                ,
                beforeActivate: function (e, ui) {
                    
                    if($(this).hasClass('parentAccordion')){
                        $('.childAccordion').accordion("option", "active", -1);
                    }
                }
               
            });

【讨论】：