Bootstrap多级下拉引脚是DOM上的子菜单

Question

简而言之，我正在尝试使用Bootstrap的多级下拉功能。

在这里，我们面临一个问题，例如，如果您将鼠标光标从下拉菜单或下拉子菜单中移出，则默认情况下将其隐藏。但是我想在鼠标光标退出下拉菜单或下拉菜单后将其固定。 ＆安培;一旦我点击DOM或页面上的任何位置，它就应该隐藏起来。

这里我附上一些多级菜单的参考资料。

Bootply

如果我们中的任何一个人有这方面的话请与我分享。

我发现了类似于我的要求。但它是在Bootstrap v3中开发的。我在Bootstrap v2.3.2中需要这个。这是twitter-bootstrap-multilevel-dropdown-menu

Answer 1

我对bootstrap v3的多级下拉菜单的回答也适用于v2.3.2。这是答案：https://stackoverflow.com/a/18025399/2214222

另外， Bootply example for v2.3.2

Answer 2

所以我希望我不会忘记答案：

Bootply ：http://bootply.com/113016

JS：

$('.dropdown-submenu').on('mouseover', function(){
    $(this).find('.dropdown-menu').first().show();
});

$(document).on('click', function(){
    $('.dropdown-menu .dropdown-menu').hide();
});

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;}
//.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.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;}