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

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

附言。我认为 droptown-toggle 是一个拼写错误，但我使用的是您的类名。