Bootstrap 4：如何显示一个可折叠项目并隐藏其他项目？

Question

I have some collapsible menus and I want to hide others when one clicked. Please note I want to completely hide them, not collapse them. It's different from accordion behavior.

I used accordion code and added the following function:

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

The problem is that the item which has been clicked to expand is also hides because its aria-expanded is false (however its sub-menus appears). I didn't want to use shown.bs.collapse event because of my visual plans. I tried to compare each item with the calling object but it still doesn't work.

Answer 1

This function solved my problem, I just need click event.

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