twitter-bootstrap Bootstrap 折叠导航菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16270423/
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
Bootstrap collapsing nav li menu
提问by Sterling Duchess
I'm trying to use Bootstrap's collapse plugin however with little success. I want an accordion style navigation menu with hidden sub-menus.
我正在尝试使用 Bootstrap 的折叠插件，但收效甚微。我想要一个带有隐藏子菜单的手风琴式导航菜单。
My HTML & JS:
我的 HTML 和 JS：
<ul class="nav nav-list">
<li class="nav-header">
<span>
Home
<span class="pull-right" data-toggle="collapse">X</span>
</span>
<ul class="nav nav-list collapse in" id="test" >
<li><a href="/ticket_list.cfm" title="Show list of tickets">Open Tickets</a></li>
<li><a href="/account/" title="Edit user accounts">Accounts / Community</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
$('.collapse').collapse()
</script>
This should work. When the page loads I can see the sub-menu get hidden for a ms. But I can click X or Home all I want and it won't expand.
这应该有效。当页面加载时，我可以看到子菜单隐藏了 ms。但是我可以随意单击 X 或 Home 并且它不会扩展。
I have all the JS included and properly linked I verified that. I also have a accorion panel on my sub page and the collapse tabs work there.
我已经包含了所有的 JS 并正确链接，我验证了这一点。我的子页面上还有一个手风琴面板，折叠选项卡在那里工作。
回答by PSL
Add data-targetin your li.
添加data-target在您的li.
<li class="nav-header" data-toggle="collapse" data-target="#test"> <span>
Also if you want to have it collapsed initially you dont need to call .collapse()instead you can just remove inclass from the collapsible section. i.e
此外，如果您想让它最初折叠起来，则不需要调用，.collapse()而只需in从可折叠部分中删除类即可。IE
<ul class="nav nav-list collapse" id="test">
