[英]Dropdown menu using Twitter Bootstrap (JS and Jquery) doesn't drop down--what is wrong?
我是网站开发的新手,因此我遵循其他开发人员提供的模式。 我正在关注有关如何在下拉菜单中添加内容的本网站教程。
我在遵循本教程后发现了另一个人的堆栈溢出问题。 我丢失了链接,尽管浏览了我的历史记录,但仍找不到它。 有人建议该教程是使用Bootstrap的版本1构建的,并请参考Bootstrap网站以获取更多信息。 我做到了(我的当前版本反映了使用引导程序的指南),但是我无法从任何角度了解为什么我的代码无法正常工作。
筛选引导资源和类似的堆栈溢出问题后,例如
所有人似乎都强调了在引导程序之前导入jquery的重要性,因此我已经做到了,但这似乎并不能解决我的问题。 这是显示的内容: http : //imgur.com/UtYlUXG
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>KTown Car Share</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://flip.hr/css/bootstrap.min.css"> </script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
<style type="text/css">
body{
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a>
<ul class="dropdown-menu">
Item1
</ul>
</li>
</ul>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</body>
</html>
非常感激任何的帮助! 我对尝试什么一无所知。
我将粘贴的html和javascript复制到jsfiddle及其工作的http://jsfiddle.net/daJT7/3/
我复制的部分:
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account <b class="caret"></b></a>
<ul class="dropdown-menu">
Item1
</ul>
</li>
</ul>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
因此,我认为这一定与您的参考有关。 我注意到的一件事是
<script src="http://flip.hr/css/bootstrap.min.css"> </script>
无效(脚本用于脚本,并且您已经在另一行上导入了引导css)。 删除它。 这可能会或可能不会引起问题。
作为旁注。 我不会直接链接到twitter bootstrap github或其他人的网站(除非flip.hr是您的网站:))。
尝试改用CDN(例如http://www.bootstrapcdn.com/ )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.