Dropdown menu using Twitter Bootstrap (JS and Jquery) doesn't drop down--what is wrong?
Question
I'm a complete newbie to website development, so I'm following patterns given by other developers. I'm following this site tutorial on how to add in a dropdown menu.
I found one question on stack overflow of another person following this tutorial. I've lost the link and despite looking through my history, I haven't been able to find it. Someone suggested that the tutorial was build using bootstrap's version 1, and to refer back to bootstrap site for more information. I did (my current version reflects using bootstrap's guide), but I wasn't able to glean any insight into why my code won't work.
After sifting through the bootstrap resources and similar stack overflow questions like
Dropdown menu with Twitter Bootstrap
Twitter Bootstrap dropdown menu
Twitter Bootstrap 2 drop down menu is not work
All seem to stress the importance of importing the jquery before bootstrap, so I've done this, but it doesn't seem to solve my problem. Here is what shows: 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>
Any help would be most appreciated! I'm out of ideas on what to try.
1 answers
solution1
3 ACCPTED 2013-03-16 23:40:46
I copy pasted your html and javascript into a jsfiddle and its working http://jsfiddle.net/daJT7/3/
Portion I copied:
$(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>
So I think it must have something to do with your references. One thing I did notice was that
<script src="http://flip.hr/css/bootstrap.min.css"> </script>
Is invalid (script is for scripts, and you are already importing the bootstrap css on a different line). Remove this. This might or might not be causing problems.
As a side note. I wouldn't directly link to the twitter bootstrap github or someone else's website (unless flip.hr is your website :)).
Try using a CDN instead (eg http://www.bootstrapcdn.com/ )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.