可点击的多级菜单 [英] Clickable Multilevel menu

问题描述

我想做一个像这样的菜单 http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 ，它必须是多级菜单，但我只想单击即可打开菜单，也要打开多级项目，而不能将鼠标悬停在该菜单上.同样，如果菜单已打开并在主体上单击，则将关闭所有菜单.有人有什么主意吗?

I would like to do an menu like this one http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3, it has to be multilevel menu but I would like to open the menu only with clicks, also the multilevel items, not with on mouse over. Also if the menu is open and make click on the body will close all the menu. Anyone have any idea?

谢谢.

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

推荐答案

解决方案是:

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


});

这篇关于可点击的多级菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！