Twitter Bootstrap dropdown not working

14,247

Solution 1

Put the dropdown class on a div that is wrapping the li rather than on the li itself. Like this...

        <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
         ...
        </ul>
        </div>

That example is from the bootstrap site

Your code should look like this...

    <!DOCTYPE html >
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script>
    <link href="../theme/bootstrap.css" rel=stylesheet type="text/css">

    </head>
    <div class="dropdown">
        <ul class="dropdown">
        <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
          <b class="caret"></b>
        </a>
            <ul class="dropdown-menu">
              <li><a href="/app/1">Item A</a></li>
              <li><a href="/app/2">Item B</a></li>
              <li><a href="/app/3">Item C</a></li>
            </ul>
        </ul>
    </div>

I tried making a nested list, but it didn't work with bootstrap. I think it gets the two dropdowns confused.

Solution 2

Make sure you are using the latest version of JQuery

Solution 3

This is easily solved. The element wrapping your code is a li, but it needs to be a div. This works for me:

<div class="dropdown">
  <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="/app/1">Item A</a></li>
    <li><a href="/app/2">Item B</a></li>
    <li><a href="/app/3">Item C</a></li>
  </ul>
</div>

enter image description here

If you want it to look like a button, just add "btn" to the class list like this:

<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">

My header section looks like this:

<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'>
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'>
<script src='js/jquery-2.0.0.min.js' type='text/javascript'>
<script src='js/bootstrap.min.js' type='text/javascript'>

You may want to leave out the responsive css if you're not doing anything for mobile devices.

14,247

Snowcrash

Updated on September 15, 2022

Comments

Snowcrash over 1 year

Any ideas why this Twitter Bootstrap dropdown isn't working?

Javascript in head:

<script src="/assets/js/bootstrap.js" type="text/javascript"></script>

Menu HTML:

             <li class="dropdown">
                <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here...
                  <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li><a href="/app/1">Item A</a></li>
                  <li><a href="/app/2">Item B</a></li>
                  <li><a href="/app/3">Item C</a></li>
                </ul>
              </li>

Andres Ilich over 11 years

In what order is your js loaded in? jQuery goes first as always, bootstrap second.
user956584 about 11 years

Try add to dom-ready: $('.dropdown-toggle').dropdown();

Snowcrash over 11 years

I tried that and it looks awful. Plus it doesn't work. Checking their website, that's not how they're doing it. E.g. look here: twitter.github.com/bootstrap/javascript.html#dropdowns
noel over 11 years

I copy and pasted my example directly from their site. I don't understand what you mean. We need an example of your site to help an further.
THE JOATMON almost 11 years

This is the first code I've found that actually works. Thanks.
Xdg almost 11 years

For me this was important - both bootstrap.js and bootstrap.min.js contain all plugins in a single file. I was including bootstrap-dropdown.js and it wasn't working:)
jazzyfresh almost 11 years

If the dropdown is part of the navbar, twitter themselves suggest having the class inside of the list item. Inspect element on the navbar in the section "Within a navbar" at twitter.github.io/bootstrap/javascript.html#dropdowns
RealSollyM over 10 years

I have a similar problem. I copied the HTML markup from getbootstrap.com/examples/theme as is, updated the locations of the CSS and JS, put it in an ASP.net application. The dropdowns don't work and the alerts don't close. This is a new behaviour with BS3 as BS2 was working fine. Please help.