如何在关闭手风琴时自动关闭手风琴内部的所有可折叠元素？

Question

我在堆栈溢出：Closing parent accordion needs to close all children accordion上找到了这个主题，它或多或少包含了我正在搜索的内容。

我正在使用bootstrap 4，我的问题是，我不知道如何改编其他主题的代码，以便在关闭主折叠卡片时关闭折叠和单个可折叠项目……

有人能帮上忙吗？下面是我的小提琴示例：

https://jsfiddle.net/fgh0qw9x/

到目前为止，我尝试的是像这样修改代码：

 closeChildrenAccordion : function (accordion) {
            if (jQuery(".show")) {
                jQuery(".show").unbind().click(function () {
                    jQuery(accordion).removeClass('show');
                    var parentPanelHeading = jQuery(this).closest('.card-header'); // Get parent
                    var siblings           = parentPanelHeading.siblings()[0]; // Get div that needs to be closed when closing parent div

                    if(jQuery(siblings).hasClass("in"))
                    {
                        jQuery(siblings).find('a').each(function (index, element) {
                            if(jQuery(element).hasClass('show'))
                                element.click();
                        });
                    }


                });


            }
        }

但我很诚实，我不是真的理解代码，希望有人能帮助我…

Answer 1

可以将处理程序附加到在折叠项目之前触发的hide.bs.collapse，然后对当前打开的其他可折叠元素执行find操作。这应该适用于任何深度的元素：

$('.collapse').on('hide.bs.collapse', function() {
  $(this).find('.collapse.show').removeClass('show');
})

我们删除了该类的directy，因为如果您尝试使用它的api切换accordion，它将再次触发hide.bs.collapse事件。