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

}

这会产生以下效果：

Navigation Menu

然而，在移动设备上似乎存在一些我认为是由数据切换属性引起的问题。

Mobile Navigation Menu

如上所示菜单看起来正确但是，当我点击其中一个应该触发折叠的国家/地区列表的大陆时，它会折叠目的地下拉菜单而不显示任何下一层导航。

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

任何帮助将不胜感激。我还会小心翼翼地尝试更清楚地展示这个问题。

N.B。我也尝试按照以下链接中的提示进行操作，但不幸的是，他们似乎根本不会改变移动设备屏幕的行为：

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设置为＆＃34; dropdownTwo＆＃34;这里。

<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.

由于您的切换不是＆＃34;＃34;下拉＆＃34;但是＆＃34; dropdownTwo＆＃34;，Bootstrap不知道目标是什么。

Bootstrap 3：支持移动设备的多层导航菜单

2 个答案: