引导下拉列表不会出现

Question

我试图让一些引导示例工作起来，这些示例到目前为止都在工作，除了下拉列表之外，我需要添加/更改哪些代码才能使下拉列表出现呢？

http://jsbin.com/kuhin/2/edit

<!DOCTYPE html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
<hr/>
<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>
<hr/>
<script>
$(function() {
    $('.dropdown-menu').dropdown('toggle');
});
</script>
</body>
</html>

Answer 1

最初，我认为它可能还需要dropdown.js，但当您包含minified js文件时，情况并非如此，因为它包含了所有必要的插件。

但是，您似乎错过了将其包装在<div class="dropdown">中的机会。你可以找到小提琴这里。另外，您要导入两次jquery，删除底部的导入。

Answer 2

• 您将希望删除jquery包含之一，因为它会导致冲突。
• 您似乎已经删除了父div.dropdown容器。如提到过在Bootsrap文档中所示： 通过数据属性或JavaScript，下拉插件通过切换父列表项上的.open类来切换隐藏内容(下拉菜单)。
• 所以您需要保留父div.dropdown

<div class="dropdown">
    <a data-toggle="dropdown" href="#">Dropdown trigger</a>
    <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>
</div>

• 正如Tim所提到的，bootstrap.min.js确实包含下拉功能，不再需要进一步的包含。