Bootstrap - dropdown menu not working?

Question

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> 

Answer 1

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> 

Answer 2

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.