gpt4 book ai didi

css - Bootstrap 下拉菜单对我不起作用

转载 作者:行者123 更新时间:2023-11-28 11:11:02 25 4
gpt4 key购买 nike

我在 OS X 上使用 Chrome,当我进行普通的 Bootstrap 测试时它不起作用。

我使用常规的 v2.3.2 文件 downloaded from here ,然后我重新创建了一个原始测试。

这是我的 index.html 的样子:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>
$('.dropdown-toggle').dropdown()
</script>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<h2>Hello</h2>

<p>There should be a dropdown right below this paragraph.</p>

<div class="row">
<div class="span12">
<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>
</div>


</body>
</html>

当我这样做时,这是我看到的:

Bootstrap Dropdown Not Working

然而在源代码中,我看到了这个输出:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />

<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<h2>Hello</h2>

<p>There should be a dropdown right below this paragraph.</p>

<div class="row">
<div class="span12">
<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>
</div>


</body>
</html>

为什么这不起作用?

最佳答案

除了在无序列表 (the <a>) 之前包含下拉触发器之外,您还忘记了用具有 .dropdown 的元素包装菜单。类,例如

<div class="row">
<div class="span12">
<div class="dropdown">
<a class="dropdown-toggle" 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>
</div>
</div>

示例:http://jsfiddle.net/BVmUL/73/

关于css - Bootstrap 下拉菜单对我不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19403568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com