twitter-bootstrap 多级可折叠 Bootstrap 侧边导航菜单出现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18627336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trouble with multi-level collapsible Bootstrap side-nav menu
提问by Jeff W
I've been combing around looking for an example of the same problem I'm having but no luck yet. I'm trying to create a multi-level collapsible side navigation in bootstrap using bootstrap.js.
我一直在四处寻找我遇到的同样问题的例子，但还没有运气。我正在尝试使用 bootstrap.js 在引导程序中创建一个多级可折叠侧面导航。
My problem is that I've added in the second level but when I click the list item to trigger it to open it collapses the whole menu. When I re-open the menu, the second-level menu is open also. My code is below:
我的问题是我已经在第二级添加了但是当我单击列表项以触发它打开它时会折叠整个菜单。当我重新打开菜单时，二级菜单也打开了。我的代码如下：
<div class="sidebar-nav">
<p class="sidenav-header">Units and Lessons:</p>
<ul class="nav nav-list">
<li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
Content Areas
</span>
<ul class="nav nav-list collapse" id="content-areas">
<li><a href="#" title="Title">All</a></li>
<li><a href="#" title="Title">Urban Planning</a></li>
<li><a href="#" title="Title">Sustainability</a></li>
<li><a href="#" title="Title">Public Administration</a></li>
<li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a>
<ul class="nav-secondary nav-list collapse" id="nav-health">
<li><a href="#" title="Title">Introduction</a></li>
<li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li>
<li><a href="#" title="Title">Lesson: Pathology</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
Languages
</span>
<ul class="nav nav-list collapse" id="languages">
<li><a href="#" title="Title">All</a></li>
<li><a href="#" title="Title">Arabic</a></li>
<li><a href="#" title="Title">Turkish</a></li>
<li><a href="#" title="Title">Hebrew</a></li>
</ul>
</li>
</ul>
</div>
The specific section I'm talking about is under the "Health" list item under "Content Areas".
我正在谈论的特定部分位于“内容区域”下的“健康”列表项下。
Any help is greatly appreciated. Thanks!
任何帮助是极大的赞赏。谢谢！
采纳答案by Pitamber Tiwari
The problem with your markup is that whole menu is collapsed when you try to click within the list. For example, if you click All inside of Content Areas it collapse the Content Areas. The same is happening for the second level menu, Health in your case.
您的标记的问题在于，当您尝试在列表中单击时，整个菜单都会折叠起来。例如，如果您单击内容区域内的全部，它会折叠内容区域。在您的情况下，第二级菜单 Health 也会发生同样的情况。
This is caused because you don't have an accordion-heading specified. Take a look into Bootstrap Collapse Documentationwhere you will find an example like this:
这是因为您没有指定手风琴标题。看一看Bootstrap Collapse 文档，你会发现一个这样的例子：
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
Once you specify the heading your second level nav should work fine.
指定标题后，您的二级导航应该可以正常工作。
I have created a fiddlefor you to verify. I modified the Content Areas according to the Documentationand the second level menu worked fine. However, I did not modify the Languages menu items so that you can see how it's acting (try clicking within the list once the Languages is expanded)
我已经创建了一个小提琴供您验证。我根据文档修改了内容区域，二级菜单运行良好。但是，我没有修改 Languages 菜单项，以便您可以看到它的行为（一旦语言展开，请尝试在列表中单击）
回答by Ray Faddis
While Similar to Pitamber's example I would not add some of the extra classes, especially the extra divwith class "accoridan-heading", just apply that class to the atag as so.
虽然类似于 Pitamber 的示例，我不会添加一些额外的类，尤其是带有类“accoridan-heading”的额外div，只需将该类应用到a标签即可。
<ul class="nav nav-list">
<li>
<a>Menu Item with No Sub-Items</a>
</li>
<li>
<a class="accordion-heading" data-toggle="collapse" data-target="#submenu">
<span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span>
</a>
<ul class="nav nav-list collapse" id="submenu">
<li><a href="#" title="Title">Sub Item 1</a></li>
<li><a href="#" title="Title">Sub Item 2</a></li>
<li><a href="#" title="Title">Sub Item 3</a></li>
<li><a href="#" title="Title">Sub Item 4</a></li>
</ul>
</li>
</ul>
You can go further and add CSS and or some JS to place some contrast on the sub-menu and also to flip/change the caret icon when a menu item is expanded and collapsed.
您可以进一步添加 CSS 和/或一些 JS 以在子菜单上放置一些对比，并在菜单项展开和折叠时翻转/更改插入符号图标。
