Question

我无法从套头衫打开单独的下拉菜单。如果你在这里查看我的JSFiddle：LINK

您会看到，只要点击套头衫中的项目，就会显示所有现有的下拉列表。

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

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

Answer 1

问题似乎是您只有一个<ul class="dropdown-menu">内有两个下拉列表<div class="dropdown">。这确实会导致显示两个下拉列表，因为bootstrap使用这些类名来确定要显示的内容。

因此，如果您将第二个下拉列表包含在自己的<div>中，您应该获得所需的行为。我也将id="parent"向上移动到它自己的<div>，所以结构如下：

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

我已经相应修改了小提琴： http://jsfiddle.net/mjcwly/srporvqh/

Popover中的所有下拉菜单

1 个答案: