Question

我需要一个多级菜单，但Bootstrap不提供这样的东西，所以我已经制作了一个基于list-group的菜单/导航栏，它工作得很好，我可以添加多个级别的子菜单，但我遇到了大问题，它不会崩溃，直到我点击＆＃34; Pos1＆＃34; （查看bootply链接）或其他＆＃34; Pos ...＆＃34;。

我需要解决方案，以便当我点击网站的每个其他部分时该菜单将崩溃。

以下是代码，您可以在其下方找到bootply的链接：

<div class="container">
    <div id="mainmenu" class="row">
          <div class="list-group panel visible-md visible-lg">
              <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
          </div>
          <div class="list-group panel">
            <a href="#menupos1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu">Pos1 <span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
            <div class="collapse pos-absolute" id="menupos1">
              <a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1">SubPos1 <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
                  <div class="collapse list-group-submenu" id="submenu1">
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos1</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos2</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos3</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos4</a>
                  </div>
             <a href="#" class="list-group-item sub-item">SubPos2</a>
             <a href="#" class="list-group-item sub-item">SubPos3</a>
             <a href="#" class="list-group-item sub-item">SubPos4</a>
             <a href="#" class="list-group-item sub-item">SubPos5</a>                                                                    
              </div>
        </div>
    </div>
</div>

演示：http://www.bootply.com/izpRKwzlYb

如果它只能在中等和大的分辨率下工作会很棒，因为在xsmall和small中它应该保持静止。

Answer 1

将数据切换添加到Pos1，SubPos1并添加data-target =＆＃34;＃submenu1＆＃34;对于SubPos1项目，通过在单击菜单项或子菜单项时添加此项，相应的菜单将被折叠。我认为这可能会有所帮助。

在http://www.bootply.com/fY2Vr9qbDo

中查看此内容

Answer 2

如果我理解，你想要点击没有孩子的菜单（子菜单）？

如果是这种情况，您可以简单地将数据切换添加到没有自己孩子的Pos1儿童..

http://www.bootply.com/RNo69avCr1

单击事件上的Bootstrap列表组折叠

2 个答案: