부트 스트랩 접을 수있는 사이드 메뉴 항목

Question

하위 항목을 접을 수있는 부트 스트랩 사이드 메뉴를 만들려고합니다. 내가 링크 하위 메뉴의 항목이 아니라 이러한 복잡한 구조를 원하는 그러나 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> 

가져다 놓을 하위 메뉴

을 시도하는 것이다. 따라서 탐색하기가 어렵습니다.

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>