Bootstrap 3：多層導航菜單支持手機及以上

Question

據我所知，自從Bootstrap 3發佈以來，多層/多層導航已經不再正式支持開箱即用。我不明白他們爲什麼做出這個決定，因爲它似乎是一個非常愚蠢的舉動，但我目前正試圖恢復我的網站內的這種功能/行爲。

這裏是我的自舉導航菜單中的HTML：

<nav id="topNavigation" class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 

    <!-- Brand and toggle grouped for better mobile display--> 

    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
     <span class="sr-only">Toggle Navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand visible-xs" href="#">Menu</a> 
    </div> 

    <!-- Content that requires toggling on mobile devices--> 

    <div class="collapse navbar-collapse" id="navbar-collapse"> 
     <ul class="nav navbar-nav level2"> 
     <li class="active"><a href="/">Home</a></li> 
     <li><a href="/blog/">Blog</a></li> 
     <li> 
      <a class="hidden-xs" href="/destinations/">Destinations</a> 
      <a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdown">Destinations <b class="caret"></b></a> 
      <ul class="dropdown-menu level3"> 
      <li class="dropdown-submenu"> 
       <a class="hidden-xs" href="/destinations/europe-the-caucasus/">Europe &amp; the Caucasus </a> 
       <a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">Europe &amp; the Caucasus <b class="caret"></b></a> 
       <ul class="dropdown-menu level4"> 
       <li><a href="/destinations/europe-the-caucasus/albania/">Albania</a></li> 
       <li><a href="/destinations/europe-the-caucasus/armenia/">Armenia</a></li> 
       <li><a href="/destinations/europe-the-caucasus/azerbaijan/">Azerbaijan</a></li> 
       <li><a href="/destinations/europe-the-caucasus/georgia/">Georgia</a></li> 
       <li><a href="/destinations/europe-the-caucasus/europes-arctic-circle/">Europe&#39;s Arctic Circle</a></li> 
       <li><a href="/destinations/europe-the-caucasus/romania/">Romania</a></li> 
       <li><a href="/destinations/europe-the-caucasus/turkey/">Turkey</a></li> 
       <li><a href="/destinations/europe-the-caucasus/montenegro/">Montenegro</a></li> 
       </ul> 
      </li> 
      <li class="dropdown-submenu"> 
       <a class="hidden-xs" href="/destinations/north-africa/">North Africa</a> 
       <a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">North Africa <b class="caret"></b></a> 
       <ul class="dropdown-menu level4"> 
       <li><a href="/destinations/north-africa/egypt/">Egypt</a></li> 
       <li><a href="/destinations/north-africa/libya/">Libya</a></li> 
       <li><a href="/destinations/north-africa/morocco/">Morocco</a></li> 
       <li><a href="/destinations/north-africa/mali-burkina-faso/">Mali &amp; Burkina Faso</a></li> 
       <li><a href="/destinations/north-africa/sudan/">Sudan</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

目前，我已成功地恢復了使用純CSS懸停效果，桌面多級導航功能：

@media (min-width: 992px){ 

    /*Add multi-level navigation support*/ 
    .dropdown-submenu{position:relative;} 
    .dropdown-submenu>.dropdown-menu{top:-2%;left:99.5%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;margin:0;padding:0} 
    .dropdown-submenu:active>.dropdown-menu, .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:active>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;} 

    .navbar-nav > li:hover > ul.dropdown-menu, 
    .navbar-nav > li:hover > ul.dropdown-menu > li.dropdown-submenu:hover > ul.dropdown-menu { 
    display: block; 
    background-color: #FFA050; 
    } 

    .navbar-nav > li:hover ul li a:hover, 
    #topNavigation .navbar-nav > li.active ul li a:hover{ 
    background-color: #451F00; 
    color: #FFA050; 
    } 

    #topNavigation .navbar-nav > li.active ul li a { 
    background-color: #FFA050; 
    color: #451F00; 
    } 

} 

這產生以下效果：

但是，在移動設備上，似乎存在一些問題，我認爲這是由數據切換屬性造成的。

菜單看起來是正確的，你可以但看到上面，當我點擊它應該觸發國家開放的摺疊列表中的大陸之一，它，而不是崩潰的目的地下拉列表顯示任何下一wihtout一層導航。

我的主要問題是，我如何調整我的代碼以確保數據切換屬性的目標是暴露下面內容的正確菜單？我嘗試過替換數據切換中的值，但實際上它並沒有做任何事情，並且無論放在哪裏都表現出相同的行爲。

任何幫助將不勝感激。我還會把小提琴放在一起，試圖更清楚地展示這個問題。

N.B.我也試着跟隨下面的鏈接提示，但unforunately他們似乎並沒有改變在所有的移動屏幕尺寸的行爲：

http://www.jeffmould.com/2014/01/09/responsive-multi-level-bootstrap-menu/

Answer 1

在引導下拉源來看，似乎當單擊下拉項目時，boostrap附加一個觸發隱藏所有下拉菜單的功能的事件。如果我們停止運行該事件並在點擊下拉切換時自行切換可見性，它應該可以工作。因此，像：

//might be selecting too many things 
$(".level3 .dropdown-toggle").click(function(e){ 
    $(this).closest('li').toggleClass('open') //show dropdown 
    e.stopPropagation(); //stops from hiding menu 
}) 

Example

我沒有測試過這些代碼如何影響別的，但我想這是一個良好的開端。

Answer 2

您有data-toggle這裏設置爲「dropdownTwo」。

<a class="visible-xs dropdown-toggle" href="#" data-toggle="dropdownTwo">North Africa <b class="caret"></b></a> 

在Bootstrap JS docs it is stated是：

data-toggle="dropdown" still required 
Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element. 

由於您的切換不是 「下拉菜單」，而是 「dropdownTwo」，引導不知道什麼目標。