Bootstrap 3下拉菜单丢失
引导3仍然在RC，但我只是想实现它。 我无法弄清楚如何把一个子菜单类。 即使在CSS中没有任何课程，甚至新的文档也没有提到
在2.x中，类名称是dropdown-submenu
Bootstrap 3 RC中的dropdown-submenu已被删除。 用Bootstrap作者Mark Otto的话来说
“子菜单现在网上没有太多的地方，尤其是移动网站，他们将被删除3.0” – https://github.com/twbs/bootstrap/pull/6342
但是，有了一点额外的CSS，你可以在3中获得相同的function。
这是一个使用3.0 RC 1的例子： http ： //bootply.com/71520
这是一个使用Bootstrap 3.0.0（final）的例子： http : //bootply.com/86684
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; }
示例标记
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="menu-item dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a> <ul class="dropdown-menu"> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a> <ul class="dropdown-menu"> <li class="menu-item "> <a href="#">Link 1</a> </li> <li class="menu-item dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a> <ul class="dropdown-menu"> <li> <a href="#">Link 3</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div>
PS – 在导航栏中调整左侧位置的示例： http : //bootply.com/92442
@skelly解决scheme是好的，但不能在移动设备上工作，因为hover状态将不起作用。
我已经添加了一点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主题（页面顶部）find： http : //shprinkone.julienrenaux.fr/
直到今天（2014年1月9日）Bootstrap 3仍不支持子菜单下拉菜单。
我search了谷歌有关响应导航菜单，发现这是最好的，但我。
这是智能菜单 http://www.smartmenus.org/
我希望这是谁想要导航菜单与多级子菜单的出路。
更新2015-02-17智能菜单现在完全支持子菜单的Bootstrap元素风格。 欲了解更多信息，请看智能菜单网站。
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尽快添加subsfunction。
评论到Skelly真正有用的解决方法 ：在Bootstrap-sass 3.3.6中，utilities.scss，第19行： .pull-left具有float:left !important 。 因此，我build议在他的CSS中使用！important：
.dropdown-submenu.pull-left { float:none !important; }
前几天我碰到这个问题。 我尝试了很多解决scheme，最终我没有真正为我工作，最终创build了bootstrap下拉代码的扩展/重写。 它是对closeMenus函数进行更改的原始代码的副本。
我认为这是一个很好的解决scheme，因为它不影响引导js的核心类。
你可以在gihub上查看： https ： //github.com/djokodonev/bootstrap-multilevel-dropdown
我为下拉提供了另一个解决scheme。 希望这是有益的只需添加此js脚本
<script type="text/javascript"> jQuery("document").ready(function() { jQuery("ul.dropdown-menu > .dropdown.parent").click(function(e) { e.preventDefault(); e.stopPropagation(); if (jQuery(this).hasClass('open2')) jQuery(this).removeClass('open2'); else { jQuery(this).addClass('open2'); } }); }); < /script> <style type="text/css">.open2{display:block; position:relative;}</style>
