javascript - Bootstrap 4 : How to show one collapsible item and hide others?

Question

我有一些可折叠菜单，我想在单击时隐藏其他菜单。请注意，我想完全隐藏它们，而不是折叠它们。它与 Accordion 行为不同。

我使用了 Accordion 代码并添加了以下功能:

$('#bottomNavBar .collapse').on('show.bs.collapse', function (e) {
    // do something…
    var me = e.target;
    $('#bottomNavBar [aria-expanded="false"]').each(function () {
        if (!$(this).is(me)) {
            $(this).hide();
        }
    });
});

问题是，单击展开的项目也被隐藏，因为它的 aria-expanded 为 false(但是它的子菜单出现)。由于我的视觉计划，我不想使用 shown.bs.collapse 事件。我尝试将每个项目与调用对象进行比较，但它仍然不起作用。

Answer 1

这个函数解决了我的问题，我只需要click事件。

$('#bottomNavBar [aria-expanded="false"]').on('click', function (e) {
    // do something…
    var me = this;
    $('#bottomNavBar [aria-expanded="false"]').each(function () {
        if (this != me) {
            $(this).hide();
        }
    });
});