Question

我使用引导多级下拉菜单。一切正常，但我不知道如何同时显示一个孩子。

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

当我从大小6单击到大小5时，它同时显示两个下拉列表。当我从一个下拉菜单切换到其他菜单时，我想关闭当前子菜单。当我单击所有子菜单时，图像中的波纹管出现了问题：

Answer 1

在a.test单击上隐藏兄弟姐妹。

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

Answer 2

这就是您要查找的带有子菜单和嵌套子菜单的下拉菜单

(function($) {
  $(document).ready(function() {
    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('open');
      $(this).parent().toggleClass('open');
    });
  });
})(jQuery);

li.main{
padding:20px;
border:1px solid grey;
display:inline-block
}
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #555;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>

</head>

<body>
  <li class="dropdown main">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown A <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown 1</a></li>
      <li><a>Dropdown 2</a></li>
      <li><a href="#">Dropdown 3</a></li>
      <li class="divider"></li>
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu 4.1</a></li>
          <li><a href="#">Dropdown Submenu 4.2</a></li>
          <li><a href="#">Dropdown Submenu 4.3</a></li>
          <li><a href="#">Dropdown Submenu 4.4</a></li>
        </ul>
      </li>
      <li class="dropdown dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu 5.1</a></li>
          <li><a href="#">Dropdown Submenu 5.2</a></li>
          <li><a href="#">Dropdown Submenu 5.3</a></li>
          <li class="divider"></li>
          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown Submenu 5.4.1</a></li>
              <li><a href="#">Dropdown Submenu 5.4.2</a></li>
              <li class="divider"></li>
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
                </ul>
              </li>
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
                  <li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="dropdown main">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown B <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown Link 1</a></li>
      <li><a href="#">Dropdown Link 2</a></li>
      <li><a href="#">Dropdown Link 3</a></li>
      <li class="dropdown dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu Link 4.1</a></li>
          <li><a href="#">Dropdown Submenu Link 4.2</a></li>
          <li><a href="#">Dropdown Submenu Link 4.3</a></li>
          <li><a href="#">Dropdown Submenu Link 4.4</a></li>
        </ul>
      </li>
      <li class="dropdown dropdown-submenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
        <ul class="dropdown-menu">
          <li><a href="#">Dropdown Submenu Link 5.1</a></li>
          <li><a href="#">Dropdown Submenu Link 5.2</a></li>
          <li><a href="#">Dropdown Submenu Link 5.3</a></li>
          <li class="divider"></li>
          <li class="dropdown dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
              <li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
              <li class="divider"></li>
              <li class="dropdown dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
                </ul>
              </li>
              <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
                  <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>

</body>

</html>

Bootstrap多级下拉列表不会自动关闭

2 个答案: