Bootstrap，使用手风琴的堆叠导航以及JSFiddle和TryIt的问题

Question

>我试图用手风琴创建一个堆叠的导航。我发现

引导手风琴导航与下拉图标-V 形

它显示了JSFiddle http://jsfiddle.net/NBcmh/29/

我将其修改为 http://jsfiddle.net/oyk2beph/工作得很好(不漂亮但有效(。

<!-- Department Menu
================================================== -->
<ul id="sidenav" class="accordion nav nav-pills nav-stacked">
<li class="accordion-group">
<a data-toggle="collapse" data-parent="#sidenav" class="accordion-toggle collapsed" href="#cat31">Hochschullehrgänge für LehrerInnen (3)<span class="caret arrow"></span></a>
<ul class="nav nav-list collapse" id="cat31">
<li style="margin-left: 20px"><a href="#351">Hochschullehrgang11</a></li>
<li style="margin-left: 20px"><a href="#268">Hochschullehrgang12</a></li>
<li style="margin-left: 20px"><a href="#006">Hochschullehrgang13</a></li>
</ul>
</li>
<li class="accordion-group">
<a data-toggle="collapse" data-parent="#sidenav" class="accordion-toggle collapsed" href="#cat34">Hochschul-, Universitäts- und Masterlehrgänge (3)<span class="caret arrow"></span></a>
<ul class="nav nav-list collapse" id="cat34">
<li style="margin-left: 20px"><a href="#321">Masterlehrgang</a></li>
<li style="margin-left: 20px"><a href="#319">Masterlehrgang</a></li>
<li style="margin-left: 20px"><a href="#320">Masterlehrgang</a></li>
</ul>
</li>
</ul>
<ul id="sidenav01" class="accordion nav nav-department nav-tabs nav-stacked">
<li class="accordion-group">
<a href="#li02" data-toggle='collapse' data-target='#subnav01' data-parent='#sidenav01' class="accordion-toggle collapsed">Menu1</a>
<ul id="subnav01" class="nav nav-list collapse">
<li><a href="#1">Item 11</a></li>
<li><a href="#2">Item 12</a></li>
<li><a href="#3">Item 13</a></li>
</ul>
</li>
<li class="accordion-group">
<a href="#li02" data-toggle='collapse' data-target='#subnav02' data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron pull-right"></i>Menu2</a>
<ul id="subnav02" class="nav nav-list collapse">
<li><a href="#pimu">Item 21</a></li>
<li><a href="#schol">Item 22</a></li>
<li><a href="#links">Item 23</a></li>
</ul>
</li>
<li class="accordion-group">
<a href="#li03" data-toggle='collapse' data-target='#subnav03' , data-parent='#sidenav01' class="accordion-toggle collapsed"><i class="icon-chevron pull-right"></i>Menu3</a>
<ul id="subnav03" class="nav nav-list collapse">
<li><a href="#pimu">Item 31</a></li>
<li><a href="#schol">Item 32</a></li>
<li><a href="#links">Item 33</a></li>
</ul>
</li>
<li>
<a href="directory.php">Staff Profiles</a>
</li>
</ul>
<!--/nav-list menu-->

并使用了提供的JavaScript

$(document).on('click.collapse.data-api', '.accordion-toggle', function(event) {
var $this = $(this),
parent = $this.data('parent'),
$parent = parent && $(parent);
if ($parent) {
$parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed');
}
});

然后，我在不同的环境中使用相同的源创建了另一个测试 https://www.w3schools.com/code/tryit.asp?filename=FWCXINDT91X6

在那里，系统不再工作。

有人可以告诉我为什么它在 jsfiddle 上工作而不是在 tryit 上工作吗？ 也许还需要做什么才能让我的导航正常工作？

提前致谢

塞巴斯蒂安

Answer 1

检查 tryit 的 html。 这是完全不同的。 它不使用引导程序，而是使用仅将显示设置为阻止的内联事件侦听器。据我所知，tryit 中根本没有提到引导程序。