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

时间:2019-07-01 20:26:18

标签: javascript jquery bootstrap-4

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

我使用的是Bootstrap 4,我的问题是我不知道如何改写其他主题的代码,以使关闭主手风琴卡时手风琴以及单个可折叠物品关闭。 / p>

有人可以帮忙吗?这是我的小提琴示例:

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();
                        });
                    }


                });


            }
        }

但是我很诚实,我不太了解代码,希望有人可以帮助我...

1 个答案:

答案 0 :(得分:1)

您可以将处理程序附加到hide.bs.collapse上,该处理器将在折叠项目之前触发,然后find个当前打开的其他可折叠元素被触发。这应该适用于任何深度的元素:

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

我们直接删除了该类,因为如果您尝试使用其api切换手风琴,它将再次触发hide.bs.collapse事件。