peterxeno Posted August 12, 2012 Share Posted August 12, 2012 (edited) Hey there. I just recently started to use Bootstrap and was wondering why this dropdown is not working, I have exactly what they have on their example site. <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script href="js/jquery.js" type="text/javascript" ></script><script href="js/jquery-ui.js" type="text/javascript" ></script> <script href="js/bootstrapjs" type="text/javascript" ></script><script href="js/bootstrap-dropdown.js" type="text/javascript" ></script><link href="css/bootstrap.css" rel="stylesheet" type="text/css" /><link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /><!-- <script href="js/document.js" type="text/javascript" ></script> --><script type="text/javascript"> $('.dropdown-toggle').dropdown(); </script></head> <body><div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"><ul class="nav pull-left"> <a class="brand" href="#">Project name</a></ul><div class="nav-collapse"><ul class="nav pull-right"> <li><a href="#">Blog</a></li> <li class="divider-vertical"></li><li><a href="#">Facebook</a></li> <li class="divider-vertical"></li><li><a href="#">Twitter</a></li> <li class="divider-vertical"></li><li><a href="#">Flickr</a></li> <li class="divider-vertical"></li><li><a href="#">YouTube</a></li><li class="divider-vertical"></li> <li class="dropdown"> <a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Secondary link</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Another link</a></li> </ul> </li> </ul> </div><!-- /.nav-collapse --> </div> </div></div> </body> </html> Edited August 12, 2012 by peterxeno Link to comment Share on other sites More sharing options...
JamesB Posted August 13, 2012 Share Posted August 13, 2012 This code: <script type="text/javascript"> $('.dropdown-toggle').dropdown(); </script> will get ran before the <body> of the document is loaded, because it's in the <head>. You can tell it to run the code when the window is loaded, by assigning a function to window.onload: <script type="text/javascript"> window.onload = function() {$('.dropdown-toggle').dropdown();} </script> Link to comment Share on other sites More sharing options...
peterxeno Posted August 13, 2012 Author Share Posted August 13, 2012 That didn't seem to work. I tried that same code in the head, and in the body. Is it a problem with bootstrap? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now