Bootstrap collapsing nav li menu

Question

Я пытаюсь использовать плагин Bootstrap's collapse, но с небольшим успехом. Я хочу меню навигации в стиле аккордеона со скрытыми подменю.

Мой 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> 

Это должно работать. Когда загружается страница, я вижу, что подменю скрывается за ms. Но я могу щелкнуть X или Главная все, что я хочу, и оно не будет расширяться.

У меня есть все JS включены и правильно связаны Я проверил это. У меня также есть панель accorion на моей дополнительной странице, и там работают вкладки свернуть.

Answer 1

Добавить data-target в ваш li.

Fiddle

<li class="nav-header" data-toggle="collapse" data-target="#test"> <span> 

Кроме того, если вы хотите, чтобы он сначала развалился вам не нужно вызывать .collapse() вместо этого вы можете просто удалить in класс из разборной секции. i.e

<ul class="nav nav-list collapse" id="test">