Question

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

Bootstrap Accordion navigation with dropdown icon-chevron

其中显示了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中根本没有提到引导。

引导程序，带手风琴的堆叠式导航以及JSFiddle和TryIt的问题

1 个答案: