Bootstrap可摺疊的側面菜單項

Question

我想做一個使子項可摺疊的bootstrap側面菜單。

類似於http://jsfiddle.net/ 但是我想要子菜單中的鏈接項目，而不是這樣一個複雜的結構。

這是我試過

<div class="row"> 
     <!-- Main component for a primary marketing message or call to action --> 
     <div class="col-sm-3 col-md-2 sidebar"> 
      <ul class="nav nav-sidebar"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Blog</a></li> 
       <li><a href="#">About US</a></li> 
       <li><a href="#">Jobs</a></li> 
       </ul> 
      </li> 
      <li><a href="">Nav item again</a></li> 
      <li><a href="">One more nav</a></li> 
      <li><a href="">Another nav item</a></li> 
     </ul> 

     </div> 
    </div> 

的dropable子不壓其餘項目名單上下來，而是出現在它們上面。這使得很難導航。

Answer 1

使用面板和摺疊插件製作簡單的手風琴會不會更好？這裏有一個例子來展示我的意思。它做我認爲你想要的。

<div class="row"> 
    <div class="col-sm-3 col-md-2 sidebar"> 
     <ul class="nav nav-sidebar"> 
      <li> 
       <div class="panel-group" id="accordion"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
            More 
           </a> 
          </h4> 
         </div> 
         <div id="collapseOne" class="panel-collapse collapse in"> 
          <div class="panel-body"> 
           <ul> 
            <li><a href="#">Blog</a></li> 
            <li><a href="#">About US</a></li> 
            <li><a href="#">Jobs</a></li> 
           </ul> 
          </div> 
         </div> 
        </div> 

       </div> 
      </li> 
      <li><a href="">Nav item again</a></li> 
      <li><a href="">One more nav</a></li> 
      <li><a href="">Another nav item</a></li> 
     </ul> 
    </div> 
</div>