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

}

这会产生以下效果：

但是，在移动设备上似乎存在一些问题，我认为这是由 data-toggle 属性引起的。

如您在上面看到的那样，菜单看起来是正确的，但是，当我单击应该触发要打开的国家/地区折叠列表的大陆之一时，它会折叠目的地下拉列表，而不显示任何下一层导航。

我的主要问题是，如何调整我的代码以确保 data-toggle 属性的目标是正确的菜单以显示下面的内容？我已经尝试替换 data-toggle 中的值，但这实际上似乎没有做任何事情，并且无论放什么都表现出相同的行为。

任何帮助将不胜感激。我还将整理一个小提琴来尝试更清楚地展示这个问题。

注意我也尝试按照以下链接中的提示进行操作，但不幸的是，它们似乎根本没有改变移动尺寸屏幕的行为：

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.

由于您的切换不是“dropdown”而是“dropdownTwo”，Bootstrap 不知道要定位什么。