javascript - Bootstrap 多级下拉菜单不会自动关闭

Question

我使用 bootstrap 多级下拉菜单。一切正常，但我不知道，我怎么能同时只显示一个 child 。

 <div class="container">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" href="#">Size6</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size5</a>
              <ul class="dropdown-menu">
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555555</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size4</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size3</a>
              <ul class="dropdown-menu">
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size2</a>
              <ul class="dropdown-menu">
                <li><a href="#">22222222222222</a></li>
                <li><a href="#">22222222222222</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size1</a>
              <ul class="dropdown-menu">
                <li><a href="#">111111111111111111</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('.dropdown-submenu a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });
  </script>

完整的代码示例是 here .

当我从 Size6 单击到 Size5 时，它会显示两个下拉菜单。当我从一个下拉菜单切换到另一个时，我想关闭当前子菜单。当我点击所有子菜单时，我在下面的图像中显示了问题:

Answer 1

在 a.test 点击时隐藏 sibling 。

$(document).ready(function() {
      $('.dropdown-submenu a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        $(this).parent('li').siblings('li').find('ul:visible').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });

.dropdown-submenu {
      position: relative;
    }

    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-top: -1px;
    }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  
  <div class="container">
    <h2>Multi-Level Dropdowns</h2>
    <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
    <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">HTML</a></li>
        <li><a tabindex="-1" href="#">CSS</a></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li class="dropdown-submenu">
              <a class="test" href="#">Size6</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">6</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size5</a>
              <ul class="dropdown-menu">
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">5555555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555</a></li>
                <li><a href="#">55555555555555555555555555</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size4</span></a>
              <ul class="dropdown-menu">
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
                <li><a href="#">4444</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size3</a>
              <ul class="dropdown-menu">
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
                <li><a href="#">33</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size2</a>
              <ul class="dropdown-menu">
                <li><a href="#">22222222222222</a></li>
                <li><a href="#">22222222222222</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu">
              <a class="test" href="#">Size1</a>
              <ul class="dropdown-menu">
                <li><a href="#">111111111111111111</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>