缺少引导程序下拉子菜单
缺少引导程序下拉子菜单
提问于 2013-08-03 02:09:51
Bootstrap 3仍在RC中，但我只是在尝试实现它。我不知道如何放置子菜单类。即使css中没有类，甚至新的文档也没有对它做任何说明
它出现在2.x中，类名为dropdown-submenu
回答 6
Stack Overflow用户
发布于 2013-09-08 18:31:30
@skelly解决方案很好，但在移动设备上不起作用，因为悬停状态不起作用。
我添加了一点JS来恢复BS 2.3.2的行为。
PS:它将与你得到的CSS一起工作：http://bootply.com/71520，不过你可以评论下面的部分：
CSS：
/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/JS：
$('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');
});结果可以在我的WordPress主题(页面顶部)上找到：http://shprinkone.julienrenaux.fr/
Stack Overflow用户
发布于 2013-09-29 18:25:44
Shprink的代码对我帮助最大，但为了避免下拉菜单在屏幕外消失，我将其更新为：
JS：
$('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:从背景颜色：#eeeeee到背景颜色：#c5c5c5 -白色字体和浅色背景看起来不太好。
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
background-color: #c5c5c5;
border-color: #428bca;
}我希望这对人们的帮助就像对我一样多！
但我希望Bootstrap能尽快添加subs功能。
Stack Overflow用户
发布于 2016-01-13 16:45:35
对Skelly's really helpful workaround的评论:在Bootstrap-sass 3.3.6中，utilities.scss，第19行：.pull-left有float:left !important。因此，我建议在他的CSS中也使用!important：
.dropdown-submenu.pull-left {
float:none !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18023493
复制相关文章
相似问题