Jquery 在twitter引导中创建两个下拉菜单

我正试图创建一个项目列表，其中两个项目是借助twitter引导的下拉菜单。 这是我的尝试代码：

<div class="row">
    <ul class="nav nav-tabs">
        <li class="active span2">1</li>
        <li class="span2">2</li>
        <li class="span2">
        <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        3(Dropdown)
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
      </ul>
    </div>
        </li>
        <li class="span2">4</li>
        <li class="span2">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
        5(dropdown)
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        </ul>
        </li>
    </ul>
</div>

1
2

3（下拉列表）









4

5（下拉列表）

---

但当我尝试时，第一个下拉菜单很好，但另一个不会在单击时下拉。谁能解释一下原因吗？

您错过的第二个下拉列表必须用

包装。

试试这个

<div class="row">
    <ul class="nav nav-tabs">
        <li class="active span2">1</li>
        <li class="span2">2</li>
        <li class="span2">
        <div class="dropdown">
        <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
        3(Dropdown)
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
      </ul>
    </div>
        </li>
        <li class="span2">4</li>
        <li class="span2">
        <div class="dropdown">
            <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
        5(dropdown)
        <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
        </ul>
        </div>
        </li>
    </ul>
</div>

1
2

3（下拉列表）









4

5（下拉列表）