Bootstrap下拉子菜单丢失

本文翻译自：Bootstrap dropdown sub menu missing

Bootstrap 3 is still at RC, but I was just trying to implement it. Bootstrap 3仍在RC中，但是我只是在尝试实现它。 I couldn't figure out how to put a sub menu class. 我不知道如何放置一个子菜单类。 Even there is no class in css and even the new docs don't say anything about it 甚至CSS中没有类，甚至新文档也没有说什么

It was there in 2.x with class name as dropdown-submenu 它在2.x中存在，类名称为dropdown-submenu

---

#1楼

参考：https://stackoom.com/question/1DcjV/Bootstrap下拉子菜单丢失

---

#2楼

Updated 2018 更新于2018

The dropdown-submenu has been removed in Bootstrap 3 RC. dropdown-submenu已在Bootstrap 3 RC中删除。 In the words of Bootstrap author Mark Otto.. 用Bootstrap作者Mark Otto的话来说。

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342 “子菜单现在在网络上没有什么位置，特别是在移动网络上。它们将在3.0中删除。” -https://github.com/twbs/bootstrap/pull/6342

But, with a little extra CSS you can get the same functionality. 但是，仅需一点额外的CSS，您就能获得相同的功能。

Bootstrap 4 (navbar submenu on hover) Bootstrap 4 （悬停时的导航栏子菜单）

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

Navbar submenu dropdown hover 导航栏子菜单下拉悬停
Navbar submenu dropdown hover (right aligned) 导航栏子菜单下拉悬停（右对齐）
Navbar submenu dropdown click (right aligned) 导航栏子菜单下拉单击（右对齐）
Navbar dropdown hover (no submenu) 导航栏下拉悬停（无子菜单）

---

Bootstrap 3 引导程序3

Here is an example that uses 3.0 RC 1: http://bootply.com/71520 这是使用3.0 RC 1的示例： http : //bootply.com/71520

Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684 这是使用Bootstrap 3.0.0（最终版）的示例： http : //bootply.com/86684

CSS 的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;
}

Sample Markup 样本标记

<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 - Example in navbar that adjusts left position: http://bootply.com/92442 PS-导航栏上的示例可调整左侧位置： http ： //bootply.com/92442

---

#3楼

@skelly solution is good but will not work on mobile devices as the hover state won't work. @skelly解决方案很好，但由于悬停状态不起作用，因此不适用于移动设备。

I have added a little bit of JS to get the BS 2.3.2 behavior back. 我添加了一些JS来恢复BS 2.3.2的行为。

PS: it will work with the CSS you get there: http://bootply.com/71520 though you can comment the following part: PS：它将与您到达的CSS一起使用： http ： //bootply.com/71520，尽管您可以评论以下部分：

CSS: CSS：

/*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/

JS: 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');
});

The result can be found on my WordPress theme (Top of the page): http://shprinkone.julienrenaux.fr/ 结果可以在我的WordPress主题（页面顶部）上找到： http : //shprinkone.julienrenaux.fr/

---

#4楼

Shprink's code helped me the most, but to avoid the dropdown to go off-screen i updated it to: Shprink的代码对我的帮助最大，但是为了避免出现下拉菜单，我将其更新为：

JS: 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: FROM background-color: #eeeeee TO background-color: #c5c5c5 - white font & light background wasn't looking good. CSS：从background-color：#eeeeee到background-color：＃c5c5c5-白色字体和浅色背景看起来不太好。

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #c5c5c5;
  border-color: #428bca;
}

I hope this helps people as much as it did for me! 我希望这能对我有所帮助！

But i hope Bootstrap add the subs feature back ASAP. 但我希望Bootstrap尽快添加潜艇功能。

---

#5楼

Until today (9 jan 2014) the Bootstrap 3 still not support sub menu dropdown. 直到今天（2014年1月9日），Bootstrap 3仍不支持子菜单下拉菜单。

I searched Google about responsive navigation menu and found this is the best i though. 我在Google上搜索了响应式导航菜单，发现这是我最好的菜单。

It is Smart menus http://www.smartmenus.org/ 这是智能菜单 http://www.smartmenus.org/

I hope this is the way out for anyone who want navigation menu with multilevel sub menu. 我希望这是任何想要带有多层子菜单的导航菜单的人的出路。

update 2015-02-17 Smart menus are now fully support Bootstrap element style for submenu. 更新2015-02-17智能菜单现已完全支持子菜单的Bootstrap元素样式。 For more information please look at Smart menus website. 有关更多信息，请访问Smart menus网站。

---

#6楼

I make another solution for dropdown. 我为下拉菜单提出了另一种解决方案。 Hope this is helpfull Just add this js script 希望对您有所帮助。只需添加此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>