Twitter 클릭 - 부트 스트랩 다중 드롭 다운 메뉴 - jQuery 지원

Question

부트 스트랩 드롭 다운을 제어하는 ​​javascript를 수정하려면 약간의 도움이 필요합니다.

내가해야 할 일은 드롭 다운을 클릭하면 표시됩니다. 잘 작동하지만 내가 예의 드롭 다운에서 드롭 다운에 가고 싶은 경우 최상위 레벨에서 : 내가 드롭 하나를 클릭하면

<ul> 
    <li>Dropdown 1 
     <ul> 
      <li>Dropdown 2 
       <ul> 
        <li>List Item</li> 
        <li>List Item</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

, 나는 목록 드롭 다운 2라는 항목 만하는 경우를 볼 수 있습니다 전 그것을 클릭하면 전체 목록 항목이 다시 닫힙니다. 드롭 다운 2를 클릭하면 나타납니다. 두 번째 중첩 드롭 다운을 열려면 호버 방법을 찾았지만 클릭하면 표시해야합니다.

그리고 많은 도움을드립니다. 여기에 바이올린입니다 : http://jsfiddle.net/raDUC/1/

Answer 1

노력이 :

HTML :

<div class="navbar navbar-fixed-top span2"> 
    <div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a> 

    <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 1</a> 

       <ul class="dropdown-menu"> 
        <li class="dropdown dropdown-nested"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a> 

         <ul class="dropdown-menu"> 
          <li>Living and Nonliving things</li> 
         </ul> 
        </li> 
        <li> <a href="#">Another action</a> 

        </li> 
       </ul> 
      </li> 
      <li> <a href="#">Link</a> 

      </li> 
      <li> <a href="#">Link</a> 

      </li> 
      <li> <a href="#">Link</a> 

      </li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> 

       <ul class="dropdown-menu"> 
        <li> <a href="#">Action</a> 

        </li> 
        <li> <a href="#">Another action</a> 

        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <!-- /.nav-collapse --> 
    </div> 
    <!-- /.navbar-inner --> 
</div> 
<!-- /.navbar --> 

JS :

$(function(){ 
    $('.dropdown-nested').click(function(event){ 
     event.stopPropagation(); 
     var dropdown = $(this).children('.dropdown-menu'); 
     dropdown.toggle(); 
    }); 
}); 

사이드 참고 ... 나는 당신의 탐색에 다음 CSS를 추가하는 것이 좋습니다 부트 스트랩의 메뉴 :

ul.nav a { 
    outline: none; 
} 

주 메뉴 항목을 클릭하여 닫으면 그 모양이 보이지 않습니다.