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 (e.g. 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 pletely 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=".js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
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 (e.g. 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 pletely 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./jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
- 1 I'm sorry but I haven't had time to test it out yet as I'm in the process of upgrading a server. I will try it tomorrow and let you know. Thanks! – Jim Commented May 11, 2013 at 1:52
- 1 Ahhhh, now I understand. Thank you PSL!!! – Jim Commented May 11, 2013 at 21:38
1 Answer
Reset to default 7You 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.