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

Question

I want submenu in my dropdown menu to be closed when dropdown menu closed.我希望在下拉菜单关闭时关闭下拉菜单中的子菜单。 But now submenu remains open if I toggle dropdown menu again.但是现在如果我再次切换下拉菜单，子菜单会保持打开状态。

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

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

JS JS

  $(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();

  });

Answer 1

You could do something like this你可以做这样的事情

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

PS.附注。 I presume droptown-toggle is a typo but I'm using the class name you have.我认为droptown-toggle是一个错字，但我使用的是您拥有的类名。

Answer 2

Try below code.试试下面的代码。 Ignore 'Script error.'忽略“脚本错误”。 it is just snippet code bug.这只是片段代码错误。 But my code is working fine.但我的代码工作正常。

 $(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>

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-02-09 12:45:24

解决方案2
0 2018-02-09 13:00:24

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-02-09 12:45:24

解决方案2 0 2018-02-09 13:00:24

解决方案1
1 已采纳 2018-02-09 12:45:24

解决方案2
0 2018-02-09 13:00:24