하위 메뉴가 부트 스트랩에 있음 3 추가 클릭 기능 열기

Question

부트 스트랩 3 내에 하위 메뉴를 만들려고하고 있는데 (우리 모두가 이미 삭제되었음을 알고 있습니다), 마우스를 올려 놓지 않고 두 번째 및 세 번째 메뉴를 표시하려고합니다. .

어떤 이유로 2 레벨 또는 3 레벨을 클릭 할 때마다 일반 부트 스트랩 열기/닫기 기능을 토글하는 것처럼 드롭 다운 메뉴를 닫습니다.) 표시 드롭 다운 항목 2. 드롭 다운 메뉴에서 항목을 클릭 - -

나는 영지에서 작업해야

... 1) 최고 수준을 클릭 표시 2 레벨 항목 3)에 클릭 2 수준에서 항목 - 표시 3 수준 항목

은 기본적으로 나는이 CSS 클래스 대신 호버의 클릭에

.dropdown-submenu:hover>.dropdown-menu{display:block;} 

을 활성화하려는.

현재 내가 바이올린 다음

링크를 시도 http://jsfiddle.net/Tenacity/ejLDg/1/

바람직 할 수 있습니다해야 바이올린에 솔루션. 이 전체 예제를 찢어 버려서 완전히 갇혀있는 솔루션을 얻으십시오. 미리 감사드립니다.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.html">Your Logo Here</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav">   
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="test1">Top Level <b class="caret"></b></a>   
       <ul class="dropdown-menu"> 



       <li class="dropdown-submenu"> 
        <a tabindex="-1" href="#">To 2nd</a> 
        <ul class="dropdown-menu"> 
         <li class="dropdown-submenu"> 
         <a href="#">2nd to 3rd</a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">3rd level</a></li> 
         </ul> 
         </li> 
        </ul> 
        </li> 
       </ul> 
      </li>   
     </ul> 
     </div> 
    </nav> 

는 CSS가

.dropdown-submenu{position:relative;} 
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;} 
.dropdown-submenu:hover>.dropdown-menu{display:block;} 
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} 

JS 미리

$(document).ready(function() { 
    $('.dropdown-submenu').on('click', function(){ 
    $(this).parent().addClass('open'); 
    $(".btn-navbar").click(); 
    alert("clicked"); 
    }); 
}); 

감사 HTML : D

Answer 1

가 살펴 :

$(".dropdown-submenu").click(function(event) { 
    // stop bootstrap.js to hide the parents 
    event.stopPropagation(); 
    // hide the open children 
    $(this).find(".dropdown-submenu").removeClass('open'); 
    // add 'open' class to all parents with class 'dropdown-submenu' 
    $(this).parents(".dropdown-submenu").addClass('open'); 
    // this is also open (or was) 
    $(this).toggleClass('open'); 
}); 

데모 : http://jsfiddle.net/ejLDg/18/