Twitter Bootstrap：下拉菜单类不起作用

Question

我正在尝试查看以下示例的结果 O'Reilly 关于 Bootstrap 的书中的代码。我见过 关于这个主题的其他几篇文章，但似乎没有 解释以下small example。好像 下拉菜单类正在阻止无序列表 尽管我已包含引导 css 和 js 文件，但仍显示出来。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

书中的以下代码示例也是does not work in JSFiddle （按钮显示，但当我点击时没有菜单出现）：

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

谢谢。

Answer 1

您的代码有效。确保您已包含 jquery，因为下拉菜单需要它才能工作。

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Jquery UI（如果你想要的话）

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

这是另一个可供测试的有效下拉菜单。

 <div class="btn-group">
         <button class="btn btn-default">Action</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li class="disabled"><a href="#">Another action</a></li>
            <li class="divider"></li>
            <li><a href="#">Something else here</a></li>
        </ul>
    </div>