Javascript Popover中的所有下拉列表同时出现

我很难从套衫中打开单独的下拉列表。如果您在这里查看我的JSFIDLE：

您将看到，无论何时单击套头衫中的某个项目，都会显示所有现有的下拉列表

有没有办法区分以下内容以确保显示所需的下拉列表

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Level 1<span class="caret"></span></a>

---

问题似乎在于，您有两个下拉菜单

仅包装在一个

中。这确实会导致显示这两个下拉列表，因为引导使用这些类名来确定要显示的内容

因此，如果您将第二个下拉列表包装在它自己的

中，您应该会得到所需的行为。我还将

id=“parent”

向上移动到它自己的

，这样的结构如下：

<div id="parent">
    <div class="dropdown" style="position:relative">
      <!-- Level 1 Cascade -->
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1<span class="caret"></span></a>
      <!-- Items within Level 1 Cascade -->
      <ul class="dropdown-menu">
        <!-- Level 2 Cascade -->
        <li>
          <a class="trigger right-caret">Level 2</a>
          <ul class="dropdown-menu sub-menu">
            <!-- Level 3 Cascade -->
            <li><a href="#">Level 3</a></li>
            <!-- Level 3 Cascade -->
            <li>
              <a class="trigger right-caret">Level 3</a>
              <ul class="dropdown-menu sub-menu">
                <!-- so on and so forth -->
                <li><a href="#">Level 4</a></li>
                <li><a href="#">Level 4</a></li>
                <li>
                  <a class="trigger right-caret">Level 4</a>
                  <ul class="dropdown-menu sub-menu">
                    <li><a href="#">Level 5</a></li>
                    <li><a href="#">Level 5</a></li>
                    <li><a href="#">Level 5</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <!-- Level 3 Cascade -->
            <li><a href="#">Level 3</a></li>
          </ul>
        </li>
        <!-- Level 2 Cascade -->
        <li><a href="#">Level 2</a></li>
        <!-- Level 2 Cascade -->
        <li><a href="#">Level 2</a></li>
        <li>
          <a class="trigger right-caret">Level 2</a>
          <ul class="dropdown-menu sub-menu">
            <!-- Level 3 Cascade -->
            <li><a href="#">Level 3</a></li>
            <!-- Level 3 Cascade -->
            <li>
              <a class="trigger right-caret">Level 3</a>
              <ul class="dropdown-menu sub-menu">
                <!-- so on and so forth -->
                <li><a href="#">Level 4</a></li>
                <li><a href="#">Level 4</a></li>
                <li>
                  <a class="trigger right-caret">Level 4</a>
                  <ul class="dropdown-menu sub-menu">
                    <li><a href="#">Level 5</a></li>
                    <li><a href="#">Level 5</a></li>
                    <li><a href="#">Level 5</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <!-- Level 3 Cascade -->
            <li><a href="#">Level 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="dropdown" style="position:relative">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1-2<span class="caret"></span></a>
      <!-- Items within Level 1 Cascade -->
      <ul class="dropdown-menu">
        <!-- Level 2 Cascade -->
        <li><a href="#">Level 2</a></li>
      </ul>
    </div>
  </div>

我相应地修改了小提琴：