Bootstrap 4：导航内的多级下拉菜单

一尘不染

Bootstrap 4：导航内的多级下拉菜单

html

在Bootstrap 4中进行多级下拉的最简单方法是什么？我设法在SO上找到的所有示例过于混乱，或者没有包含在导航中。

我试过只是将一个下拉列表放到一个下拉列表中，但这似乎不起作用。有人可以帮我吗？

这是我的代码的基本轮廓：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<nav class="navbar navbar-toggleable-md navbar-light bg-faded">

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Link 1</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

          Dropdown link

        </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Action</a>

          <a class="dropdown-item" href="#">Another action</a>

          <a class="dropdown-item" href="#">Something else here</a>

        </div>

      </li>

    </ul>

  </div>

</nav>

阅读 440

2020-05-10

共1个答案

一尘不染

我使用以下CSS和JavaScript。它使用一个额外的类dropdown-submenu。我用Bootstrap 4 beta测试了它。

它支持多级子菜单。

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {

  if (!$(this).next().hasClass('show')) {

    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');

  }

  var $subMenu = $(this).next('.dropdown-menu');

  $subMenu.toggleClass('show');





  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {

    $('.dropdown-submenu .show').removeClass('show');

  });





  return false;

});


.dropdown-submenu {

  position: relative;

}



.dropdown-submenu a::after {

  transform: rotate(-90deg);

  position: absolute;

  right: 6px;

  top: .8em;

}



.dropdown-submenu .dropdown-menu {

  top: 0;

  left: 100%;

  margin-left: .1rem;

  margin-right: .1rem;

}


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>



<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Navbar</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">

    <span class="navbar-toggler-icon"></span>

  </button>

  <div class="collapse navbar-collapse" id="navbarNavDropdown">

    <ul class="navbar-nav">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

          Dropdown link

        </a>

        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <li><a class="dropdown-item" href="#">Action</a></li>

          <li><a class="dropdown-item" href="#">Another action</a></li>

          <li class="dropdown-submenu">

            <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>

            <ul class="dropdown-menu">

              <li><a class="dropdown-item" href="#">Submenu action</a></li>

              <li><a class="dropdown-item" href="#">Another submenu action</a></li>





              <li class="dropdown-submenu">

                <a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>

                <ul class="dropdown-menu">

                  <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>

                  <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>

                </ul>

              </li>

              <li class="dropdown-submenu">

                <a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>

                <ul class="dropdown-menu">

                  <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>

                  <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>

                </ul>

              </li>







            </ul>

          </li>

        </ul>

      </li>

    </ul>

  </div>

</nav>

2020-05-10