Question

我试图让一些Bootstrap示例正常工作，到目前为止它们都已经工作了除了下拉列表，我需要添加/更改此代码才能显示下拉列表？

<!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">中。你可以找到小提琴here。您还要导入jquery两次，删除底部的导入。

Answer 2

您想要删除其中一个jquery包含，因为它会导致冲突。
您似乎已删除了父div.dropdown容器。作为Bootsrap文档中的mentioned：

通过数据属性或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 C所提到的，bootstrap.min.js包括下拉功能，不需要进一步包含。

Bootstrap下拉列表不会出现

2 个答案: