Question

Twitter Bootstrap http://twitter.github.com/bootstrap/javascript.html#dropdown has a dropdown.js library (at http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js )that will change the “dropdown” class below to “dropdown open” which will make the dropdown menu open.

I included the js file on my local site but it’s not opening or toggling. I don’t know if I have to add an extra method to tell the jquery file what element to select, or, if I just give the element class “dropdown” the js should work without anything more.

I tried to figure it out using Firebug on the Twitter Bootstrap demo but I’m not that experienced with it. Please let me know if you know how to use this. Thank you.

I’m using it on a Rails application but that shouldn’t make a difference. It includes jquery automatically, and, as I said, I added dropdown.js. I’m just wondering if I have to do something more…

  <ul class="nav secondary-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Dropdown</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>

Answer 1

I would inspect (use firebug) the demo given at the link you provided and make sure the html structure is accurate.

If your html structure is correct, and all the appropriate classes/ids are there, then check whether you are actually initializing/loading the script correctly. You can do this using firebug or google chrome inspect by going to the resources tab and looking for your referenced js file. Or, go to the console and if there are any js load errors then you aren’t calling your files correctly.

Have you included this line?

$('#topbar').dropdown()

Also, give yourself a sanity check: try checking whether jQuery works in the first place. Try using the firebug console to change div background color or something.