嵌套的多个下拉菜单 - Bootstrap

Question

我创建了一个这样的嵌套下拉菜单：

我有我的代码。

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

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

Answer 1

您可以尝试的一件事是使用 jQuery 来模拟用户“点击”身体其他任何地方，例如

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