twitter-bootstrap Bootstrap 手风琴/可折叠无法与 ul/li 导航一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20207529/
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 accordion/collapsible not working with ul/li navigation
提问by Laynee
Im using latest bootstrap, and accordion is not working at all.. I mean, when i open Test 1 with nested 'ul', it toggles, but then when i click on test 2 with another nested 'ul', it toggles also,but without closing test 1...
我使用的是最新的引导程序，而手风琴根本无法工作。但没有关闭测试 1 ...
Any one can help me ? It looks like it wont work with 'ul' and 'li' (without panel class).
任何人都可以帮助我吗？看起来它不适用于“ul”和“li”（没有面板类）。
Thanks in advance.
提前致谢。
p.s. Here is the complete code of my accordion try.. Everything is working except auto closing previous opened.
ps 这是我的手风琴尝试的完整代码.. 一切正常，除了自动关闭以前打开的。
http://jsbin.com/OKOjUlu/1/edit?html,output
http://jsbin.com/OKOjUlu/1/edit?html,输出
<div class="row">
<div class="page-header">
<h3>Proizvodi</h3>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked" id="accordion1">
<li> <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>
<ul id="firstLink" class="collapse">
<li>SubTest1</li>
<li>SubTest1</li>
<li>SubTest1</li>
</ul>
</li>
<li> <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>
<ul id="secondLink" class="collapse">
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
</ul>
</li>
<li><a href="#">Test1</a>
</li>
<li><a href="#">Test1</a>
</li>
</ul>
</div>
<div class="col-md-9"></div>
</div>
回答by PSL
Bootstrap mostly thrives on adding/removing css classes and its rules. So the structure needs to be the same for it to have the effect to happen same as that of div. What you missed was <li class="panel">on the leaf li's that holds the trigger and its respective menu. And in your case you were missing them.
Bootstrap 主要依靠添加/删除 css 类及其规则。所以结构需要相同才能产生与div相同的效果。您错过<li class="panel">的是装有触发器的叶子 li 及其相应的菜单。在你的情况下，你错过了他们。
BS Code:
BS代码：
//In the below line this is supposed to fetch the active elements
//but in your case it did not match anything hence it failed to fetch active elements to make it inactive.
var actives = this.$parent && this.$parent.find('> .panel > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('bs.collapse', null)
}
So Try:
所以尝试：
<ul class="nav nav-stacked" id="accordion1">
<li class="panel">
<a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test12</a>
<ul id="firstLink" class="collapse panel-collapse in">
<li>SubTest1</li>
<li>SubTest1</li>
<li>SubTest1</li>
</ul>
</li>
<li class="panel">
<a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test2</a>
<ul id="secondLink" class="collapse panel-collapse">
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
<li>SubTest2</li>
</ul>
</li>
</ul>
And since this was designed to be used with divyou will have to override some rules specifically for li, like the one below.
并且由于这是为与div您一起使用而设计的，因此您必须覆盖一些专门针对 的规则li，如下所示。
#accordion1 li.panel{
margin-bottom: 0px;
}
回答by Joke_Sense10
Try this:
试试这个：
script:
脚本：
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
html:
html：
<div class="bs-example">
<div id="myAccordion" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a href="#collapseOne" data-parent="#myAccordion" data-toggle="collapse" class="accordion-toggle">Test12</a>
</div>
<div class="accordion-body collapse" id="collapseOne">
<div class="accordion-inner">
<ul>
<li>SubTest1</li>
<li>SubTest1</li>
<li>SubTest1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Check here: Demo
在这里检查：演示
