Question

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

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>

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

你可以做这样的事情

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

PS。我认为droptown-toggle是一个错字，但我使用的是您的班级名称。

Answer 2

尝试以下代码。忽略＆＃39;脚本错误。＆＃39;它只是代码片段错误。但我的代码工作正常。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: