嵌套多个下拉菜单 - Bootstrap

Posted 2021-05-05

我创建了一个嵌套的下拉菜单，如下所示：

我有我的代码。

<li class="dropdown-submenu">
    <a class="test" tabindex="-1" href="#">Products <span class="caret">
</span></a>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a class="test" href="#">Women <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Blouse</a></li>
          <li><a href="#">Sweater</a></li>
        </ul>
          ...
      </li>
    </ul>
</li>

用我的风格

.dropdown-submenu {
    position: relative;}

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

但是，当我单击下拉按钮，然后单击另一个下拉按钮时，之前的按钮不会关闭，因此它将保持重叠。如何使列表关闭？

答案

您可以尝试的一件事是使用jQuery模拟用户在主体上的任何其他位置“点击”，例如

$("body").trigger("click");