Clickable Multilevel menu

Question

私はhttp://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3のようなメニューをしたいと思っています。マルチレベルのメニューでなければなりませんが、マウスではなくマルチクリックでもメニューを開くことができます。また、メニューが開いている場合は、本文をクリックするとすべてのメニューが閉じます。誰もが考えている？

ありがとうございます。

HTML

<div class="container"> 
    <div class="row"> 
     <div class="dropdown"> 
      <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> 
       Dropdown <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
       <li><a href="#">Some action</a></li> 
       <li><a href="#">Some other action</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-submenu"> 
       <a tabindex="-1" href="#">Hover me for more options</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">Second level</a></li> 
        <li class="dropdown-submenu"> 
        <a href="#">Even More..</a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">3rd level</a></li> 
         <li><a href="#">3rd level</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Second level</a></li> 
        <li><a href="#">Second level</a></li> 
       </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

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; 
    border-radius: 0 6px 6px 6px; 
} 


.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: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
} 

JS

$(function(){ 
    $(".dropdown-submenu").on("click",function(e){ 
    var current=$(this).find(".dropdown-menu"); 
     current.toggle(); 
     e.stopPropagation(); 
    }); 
}); 

Answer 1

解決策は以下のとおりです。

JS

$(function(){ 
    $(".dropdown-submenu").on("click",function(e){ 
    var current=$(this).find(".dropdown-menu").first(); 
    console.log(current); 
     current.toggle(); 
     e.stopPropagation(); 
    }); 


$(document).click(function(){ 
    $(".dropdown-menu").hide('slow'); 
}); 


});