2016-07-26 344 views
0

我愿做这样一个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(); 
    }); 
}); 
+0

当然。在CSS中用':hover'辞职并在JavaScript中编写单击事件函数。 – user3041764

+1

Hehhe是妳对的,我一直在寻找在.dropdown-子菜单:hover和我要的onclick改变它的功能上的下拉-子菜单。 – user2112420

+0

我已经做到了,但是当我点击正文页面时,所有的多级菜单都会打开。 – user2112420

回答

0

的解决方案是:

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'); 
}); 


});