引导列表组在单击事件时折叠答案

【问题标题】：Bootstrap list-group collapse on click event引导列表组在单击事件时折叠
【发布时间】：2014-07-24 17:14:04
【问题描述】：

我需要一个多级菜单，但 Bootstrap 不提供类似的东西，所以我制作了一个基于列表组的菜单/导航栏，效果很好，我可以添加多级子菜单，但我有在大问题上，它不会崩溃，直到我点击“Pos1”（检查引导链接）或其他“Pos...”。

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

这是代码，您可以在下面找到 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 下它应该保持静止。

【问题讨论】：

标签： twitter-bootstrap menu collapse multi-level

【解决方案1】：

将 data-toggle 添加到 Pos1、SubPos1 并为 SubPos1 项添加 data-target="#submenu1"，当您单击菜单项或子菜单项时添加此项，相应的菜单将被折叠。我认为这可能是帮助满满。

签到：http://www.bootply.com/fY2Vr9qbDo

【讨论】：

我可能解释得不够好。如果我单击任何其他菜单位置，我知道如何使其折叠。问题是如果我单击网站的其他元素（例如在普通菜单中），我无法折叠菜单，如果您展开某些内容并单击让说滚动条或白色背景，那么活动菜单将关闭/折叠。我需要在桌面版本的网站中具有相同的效果。

【解决方案2】：

如果我理解，您希望没有子菜单（子菜单）的菜单在单击时折叠？

如果是这种情况，您可以简单地将 data-toggle 添加到没有自己孩子的Pos1 孩子..

http://www.bootply.com/RNo69avCr1

【讨论】：

我可能没有解释清楚，常规菜单是这样的，你点击例如 Pos1，它会展开，当你点击滚动条、背景、网站内容或任何其他元素时菜单隐藏（折叠）。如果我想隐藏它（折叠），我的菜单不能这样工作，我必须再次单击“Pos1”。如果我想让它像普通菜单一样，我该怎么办？我希望这次我能解释清楚:)