如何在 Bootstrap 4 中自动关闭下拉菜单上的子菜单答案

【问题标题】：how to automatically close submenu on dropdown-menu in Bootstrap 4如何在 Bootstrap 4 中自动关闭下拉菜单上的子菜单
【发布时间】：2018-02-09 21:00:24
【问题描述】：

我希望在下拉菜单关闭时关闭下拉菜单中的子菜单。但是如果我再次切换下拉菜单，现在子菜单仍然打开。

https://plnkr.co/edit/YUmUGHctRlypUq1BNA0p?p=preview

HTML

    <nav id="sideNavBar">
      <ul class="nav nav-pills nav-stacked">
        <li class="dropdown">
          <a href="#" id="menu" data-toggle="dropdown" class="droptown-toggle">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a href="#" class="test" data-toggle="dropdown">Submenu-1<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Item-1</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

  $(document).ready(function() {
    var $links = $('.dropdown-submenu a.test').on("click", function(e) {
      var submenu = $(this).next();
        $subs.not(submenu).hide()
        submenu.toggle();
      //$(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
    var $subs = $links.next();

  });

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

你可以这样做

$('.droptown-toggle').on('click', function(e) {
  $('.dropdown-submenu .dropdown-menu').hide();
});

PS。我认为droptown-toggle 是一个错字，但我使用的是你的类名。

【讨论】：

【解决方案2】：

试试下面的代码。忽略“脚本错误”。这只是 sn-p 代码错误。但我的代码运行良好。

$(document).ready(function() {
    var $links = $('.dropdown-submenu a.test').on("click", function(e) {
      var submenu = $(this).next();
        $subs.not(submenu).hide();

        submenu.toggle();
      //$(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    });
    var $subs = $links.next();

    $('.dropdown-toggle').on('click', function(e) {
      $('.dropdown-submenu .dropdown-menu').hide();
    });

  });

<!DOCTYPE html>
<html>
<head>
  <link data-require="bootstrap-css" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <style>
    body {
      padding-top: 60px;
    }
    
    .dropdown-submenu {
      position: relative;
    }
    
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
    }
    
    @media (max-width: 979px) {
      /* Remove any padding from the body */
      body {
        padding-top: 0;
      }
    }
  </style>

  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="bootstrap" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <nav id="sideNavBar">
          <ul class="nav nav-pills nav-stacked">


            <li class="dropdown">
              <a href="#" id="menu" data-toggle="dropdown" class="dropdown-toggle">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu">

                <li class="dropdown-submenu">
                  <a href="#" class="test" data-toggle="dropdown">Submenu-1<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Item-1</a>
                    </li>
                    <li>
                      <a href="#">Item-2</a>
                    </li>
                    <li>
                      <a href="#">Item-3</a>
                    </li>
                  </ul>

                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="test" data-toggle="dropdown">Submenu-2<span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Item-1</a>
                    </li>
                    <li>
                      <a href="#">Item-2</a>
                    </li>
                    <li>
                      <a href="#">Item-3</a>
                    </li>
                  </ul>

                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="container">
      
    </div>
  </div>
    <!-- /container -->

</body>


</html>

【讨论】：