Bootstrap 3.3.4药丸按钮下拉列表无响应

时间:2015-06-10 22:12:53

标签: html twitter-bootstrap drop-down-menu

原型分类分类系统,我在药丸式导航中使用Boostrap下拉按钮。我没有承诺这些药,所以如果不同的类如导航栏可能会起作用,我会改变,尽管我已经尝试使用导航栏和按钮组。

我不确定JavaScript包含可能不是问题,但我在我的Bootstrap发行版中没有dropdown.js。仅使用我需要的组件编译自定义版本超出了我的技能和项目范围。

头标记中的CSS和JavaScript包含:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.2.1.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

下拉列表代码:

<div id="taglist">
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="dropdown">
          <a id="number-list" href="#" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true">
                Number<span class="caret"></span>
          </a>
          <ul id="number-list-menu" class="dropdown-menu" role="menu" aria-labelledby="number-list">
              <li><a tabindex="-1" role="menuitem" href="#">One</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Two</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Three</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Four</a></li>
              <li><a tabindex="-1" role="menuitem" href="#">Five</a></li>
          </ul>
        </li>
        <li class="dropdown" role="presentation">
            <a id="actors-list" href="#" role="button" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">Actors<span class="caret"></span></a>
            <ul class="dropdown-menmu" id="actors-list-menu" role="menu" aria-labelledby="actors-list">
                <li><a tabindex="-1" role="menuitem" href="#">goats</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">children</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">dogs</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">cats</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">cows</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">donkeys</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">horses</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">birds</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">ducks</a></li>
                <li><a tabindex="-1" role="menuitem" href="#">adult humans</a></li>
            </ul>
        </li>
    </ul>
</div>

该代码尽可能地遵循getbootstrap.com JavaScript页面中的示例,除了我自己的id名称。

1 个答案:

答案 0 :(得分:2)

保罗,你在这一行中有一个错字......

<ul class="dropdown-menmu" id="actors-list-menu" role="menu"

只需将dropdown-menmu更改为dropdown-menu