Bootstrap - dropdown menu not working?
My dropdown menu in Bootstrap doesnt appear to be working - can anyone alert me to the problem? Right now it displays the dropdown, but clicking it does nothing. Thanks!
JS:
$(document).ready( function() {
$('.dropdown-toggle').dropdown();
});
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Title
</a>
<ul class="nav">
<li><a href="#">Profile</a></li>
<li class="active"><a href="#">Statistics</a></li>
<li><a href="#">Reader</a></li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Options
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Check if you're referencing jquery.js
BEFORE bootstrap.js
and bootstrap.js
is loaded only once. That fixed the same error for me:
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
This is a Rails specific answer, but I had this same problem with Bootstrap dropdown menus in my Rails app. What fixed it was adding this to app/assets/javascripts/application.js:
//= require bootstrap
Hope that helps someone.
putting
<script src="js/bootstrap.min.js"></script>
file at the last after the
<script src="jq/jquery-2.1.1.min.js"></script> solved this problem for me .
this is how i use write it now and no problem
<script src="jq/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I had to download the source files instead of just the compressed files that it says to use for quick start on the bootstrap website