[英]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.