$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
});
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
// Avoid following the href location when clicking
event.preventDefault();
// Avoid having the menu to close when clicking
event.stopPropagation();
// If a menu is already open we close it
$('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
// opening the one you clicked on
$(this).parent().addClass('open');
var menu = $(this).parent().find("ul");
var menupos = $(menu).offset();
if (menupos.left + menu.width() > $(window).width()) {
var newpos = -$(menu).width();
menu.css({ left: newpos });
} else {
var newpos = $(this).parent().width();
menu.css({ left: newpos });
}
});
CSS:FROM background-color:#eeeeee TO background-color:#c5c5c5 - 白色字体和浅色背景看起来不太好 .
7 回答
我为下拉列表做了另一个解决方案 . 希望这是有帮助的只需添加此js脚本
Updated 2018
dropdown-submenu
已在Bootstrap 3 RC中删除 . 用Bootstrap作者Mark Otto的话来说..但是,通过一些额外的CSS,您可以获得相同的功能 .
Bootstrap 4 (悬停时的导航栏子菜单)
Navbar submenu dropdown hover
Navbar submenu dropdown hover (right aligned)
Navbar submenu dropdown click (right aligned)
Navbar dropdown hover (no submenu)
Bootstrap 3
以下是使用3.0 RC 1的示例:http://bootply.com/71520
以下是使用Bootstrap 3.0.0(最终版)的示例: http://bootply.com/86684
CSS
Sample Markup
附: - 调整左侧位置的导航栏示例:http://bootply.com/92442
@skelly解决方案很好但不能在移动设备上运行,因为悬停状态不起作用 .
我添加了一些JS来恢复BS 2.3.2的行为 .
PS:它可以与您到达的CSS一起使用:http://bootply.com/71520虽然您可以评论以下部分:
CSS:
JS:
结果可以在我的WordPress主题(页面顶部)找到:http://shprinkone.julienrenaux.fr/
直到今天(2014年1月9日),Bootstrap 3仍然不支持子菜单下拉列表 .
我在谷歌搜索了响应式导航菜单,发现这是我最好的 .
这是 Smart menus http://www.smartmenus.org/
我希望这是任何想要使用多级子菜单的导航菜单的人的出路 .
更新2015-02-17智能菜单现在完全支持子菜单的Bootstrap元素样式 . 有关更多信息,请查看智能菜单网站 .
Shprink的代码对我帮助最大,但为了避免下拉屏幕,我将其更新为:
JS:
CSS:FROM background-color:#eeeeee TO background-color:#c5c5c5 - 白色字体和浅色背景看起来不太好 .
我希望这能帮助人们,就像它对我一样!
但我希望Bootstrap尽快添加子功能 .
对Skelly's really helpful workaround的评论:在Bootstrap-sass 3.3.6中,utilities.scss,第19行:
.pull-left
有float:left !important
. 从那以后,我建议在他的CSS中使用!important:几天前我碰到了这个问题 . 我尝试了很多解决方案,但最终没有一个对我有效,我最终创建了一个扩展/覆盖bootstrap的下拉代码 . 它是原始代码的副本,其中包含对closeMenus函数的更改 .
我认为这是一个很好的解决方案,因为它不会影响bootstrap js的核心类 .
你可以在gihub上查看:https://github.com/djokodonev/bootstrap-multilevel-dropdown