Twitter Bootstrap Dropdown Menu Doesn't Appear
Question
Unlike most people who have trouble getting the Twitter Bootstrap Dropdown menu to work, I can't even get it to appear in any of my browsers (eg Chrome 26). It will only appear if I remove the "dropdown-menu" property from the class attribute. All of the code within the dropdown div was cut-and-pasted directly from the documentation page. I've used all of the surrounding code with all of the "Scaffolding" and "Base CSS" examples and they worked just fine. If I view the source, I can see the code is there. It just doesn't display in my browser unless I remove the "dropdown-menu" property. I downloaded Bootstrap a week ago so I'm using a recent version. BTW, I did completely clear out all my browser settings and restart. Can anyone see what I'm doing wrong?
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Components | Dropdowns</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<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>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
1 answers
solution1
7 ACCPTED 2013-05-10 21:33:50
You need to add a trigger to the dropdown:-
Demo
<div class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button"
data-toggle="dropdown" href="#">Dropdown
<b class="caret"></b></a> <!--Here-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<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>
When you remove the class dropdown-menu it appears because it just appears the ul as is with some styling.
or just add this $('.dropdown-menu').toggle(); with out trigger.
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.