2013-04-29 144 views
4

我正在嘗試使用Bootstrap的崩潰插件,但收效甚微。我想要帶有隱藏子菜單的手風琴式導航菜單。Bootstrap崩潰導航li菜單

我的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或Home,但不會擴展。

我已經包括了所有的JS並正確鏈接,我證實了這一點。我在我的子頁面上也有一個accorion面板,摺疊標籤在那裏工作。

回答

10

data-target加入您的li

Fiddle

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

此外,如果你想擁有它最初是摺疊的,你不需要調用.collapse(),而不是你可以從可拆卸的部分刪除in類。即

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

該死的工作就像一個魅力。謝謝。 – 2013-04-29 02:45:51