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>