可點擊菜單多層次

我願做這樣一個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; 
}

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

來源

2016-07-26 user2112420

當然。在CSS中用'：hover'辭職並在JavaScript中編寫單擊事件函數。 – user3041764

Hehhe是妳對的，我一直在尋找在.dropdown-子菜單：hover和我要的onclick改變它的功能上的下拉-子菜單。 – user2112420

我已經做到了，但是當我點擊正文頁面時，所有的多級菜單都會打開。 – user2112420

的解決方案是：

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


});

來源

2016-07-27 11:11:41 user2112420

可點擊菜單多層次

回答

相關問題