Bootstrap dropdown does not work

Question

I'm starting to experiment with Bootstrap, but I'm not able to get the js dropdown function working the way it does in their doc.

The code I'm using is source from one of the example dropdown nodes on their own site. data-toggle="dropdown" is used on the links, and everything is as they say it should be. Anyone with a fresh set of eyes and more experience know whats going on? http://cssdeck.com/labs/pipw6ahd

<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">


<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
  <ul class="nav" role="navigation">
    <li class="dropdown">
      <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
    </li>

    <li class="dropdown open">
      <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
  <ul class="nav pull-right">
    <li id="fat-menu" class="dropdown">
      <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>

Solution 1

I think that you have a typo in the way you are including the bootstrap JS. Have a look at <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> and notice that you have .jss for the extension and also... the reason the link starts with // (double slash) is because it's missing the http: or https: protocol and they leave it off so you can add it.

You also forgot to include jQuery (it's a must for bootstrap's JS to work) and make sure you include it above the bootstrap JS or it won't work.

Here's a fiddle of the bare bone dropdown working with everything included.

The Fiddle

HTML

<div class="dropdown">
  <a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>Item One</li>
      <li>Item Two</li>
    </ul>
</div>

Solution 2

I just had the same issue in Bootstrap 3.3.2, that dropdowns weren't working.

I had included an older version of jquery (1.3) which doesn't work with bootstrap, I got this hint while looking at Firefox Webdeveloper Tools (F12) in Console and JS option enabled.

"Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"

Removing this jquery include resolved my issue.

Comments

[calyxofheld]

Aaaand that jss thing turned out to be it. I saw it early on, but since it was auto-generated from cssdeck's feature for adding libraries, I figured it was intentional. Looks like they made an error! Thanks!!

[sulfureous]

Yep, that can certainly ruin your day. Glad it worked out for you.