javascript - Bootstrap 4 侧边栏多级 - 折叠显示隐藏不起作用

Question

我用 bootstrap 4 创建了一个垂直 Nav 和 2 级列表。当我点击一个下拉菜单时，另一个下拉菜单没有关闭。

请在此处检查问题。 https://jsfiddle.net/thilanka/cr0Lfmd1

  <ul class="nav flex-column flex-nowrap">
             <li class="nav-item drop">
                    <a class="nav-link collapsed" href="#submenu1" data-toggle="collapse" > sub menu 1</a>
                    <div class="collapse" id="submenu1" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">

                            <li class="nav-item">
                                <a class="nav-link collapsed py-1" href="#submenu1sub1" data-toggle="collapse" >sub 11</a>
                                <div class="collapse" id="submenu1sub1" aria-expanded="false">
                                    <ul class="flex-column nav pl-4">
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-clock-o"></i> Daily
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>           
             <li class="nav-item drop">
                    <a class="nav-link collapsed" href="#submenu4" data-toggle="collapse" >sub menu 2</a>
                    <div class="collapse" id="submenu4" aria-expanded="false">
                        <ul class="flex-column pl-2 nav">

                            <li class="nav-item">
                                <a class="nav-link collapsed py-1" href="#submenu1sub3" data-toggle="collapse" >sub 22</a>
                                <div class="collapse" id="submenu1sub3" aria-expanded="false">
                                    <ul class="flex-column nav pl-4">
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-clock-o"></i> Daily
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link p-1" href="#">
                                                <i class="fa fa-fw fa-dashboard"></i> Dashboard
                                            </a>
                                        </li>
                                </div>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

我需要创建一个带有 2 级菜单的 bootstrap 4 侧边栏。

Answer 1

我不知道是否可以使用 Bootstrap 自己的 API，但您可以使用一点点 jQuery 来实现:

代码:

$('#my-nav>.nav-item').click(function(e) {
  $('.nav-item').not(this).each(function(a, b){
    $(b).find('div.collapse.show').each(function(x, y) {
        $(this).removeClass('show');
    });
  });
});

确保将 my-nav 的 ID 提供给您的父级 ul。这个想法是从所有 div 子级中删除 show 类，除了被单击的一个元素。

DEMO