Bootstrap, сложная навигация с гармошкой и проблемы с JSFiddle и TryIt

Question

Я пытался создать сложную навигацию с гармошкой.Я нашел

Bootstrap Accordion навигация с выпадающим значком-шевроном

, который показал 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

Проверьте HTML-код tryit.Это совершенно другое.Он не использует начальную загрузку, а использует встроенный прослушиватель событий, который только блокирует отображение.Из того, что я понял, нет никакой ссылки на начальную загрузку в tryit.