javascript - Bootstrap 3 : Multi-tier navigation menu support for mobiles and up

Question

据我所知，自从发布 Bootstrap 3 以来，官方不再支持开箱即用的多级/多层导航。我不明白他们为什么做出这个决定，因为这对我来说似乎是一个非常愚蠢的举动，但目前我正在尝试在我的网站中恢复此功能/行为。

这是我的 Bootstrap 导航菜单的 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 属性针对的是正确的菜单，以暴露下面的内容？我已经尝试替换数据切换中的值，但这实际上似乎没有做任何事情并且无论放在这里什么都表现出相同的行为。

任何帮助将不胜感激。我还会整理一个 fiddle 来尝试更清楚地演示这个问题。

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

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

Answer 1

查看 bootstrap 下拉源代码，似乎 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

我还没有测试这段代码如何影响其他任何东西，但我想这是一个好的开始。