Bootstrap 多级下拉菜单将子菜单固定在 DOM 上答案

【问题标题】：Bootstrap Multi-level dropdown pin the sub menu's on DOMBootstrap 多级下拉菜单将子菜单固定在 DOM 上
【发布时间】：2014-02-18 22:27:04
【问题描述】：

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

在这里我们面临一个问题，例如如果您将鼠标光标移出下拉菜单或下拉子菜单，则默认情况下它会隐藏。但即使在鼠标光标离开下拉菜单或下拉子菜单后，我也想固定它。 & 一旦我点击 DOM 或页面上的任何位置，它应该会被隐藏。

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

Bootply

如果我们中的任何人对此有任何想法，请与我分享。

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

另外， Bootply example for v2.3.2

【讨论】：

【解决方案2】：

所以我希望我不要忘记答案中的某些内容：

引导层：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;}

【讨论】：