CODEWITHSUNDEEP
csstwitter-bootstrap
Chase Roberts
Chase Roberts

Reputation: 9386

Can't get bootstraps dropdowns to work

I've checked my javascript files and I think I have all the right ones. But I am not getting anything to dropdown.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

...
        <div class="span3"><center>       
        <a href="#" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Buy A Contract</a>
        <ul class="dropdown-menu">
            <li><a href="#">Hello World</a></li>
            <li><a href="#">Why am I not seeing this?</a></li>

        </ul>
        </div>

        </center>
        </div>
...

Upvotes: 1

Views: 4407

Answers (2)

Tieson T.
Tieson T.

Reputation: 21239

Looks like one obvious issue: no jQuery reference. Also, since you included this:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

you don't need to reference bootstrap-dropdown.js (the min file contains all the plugins).

EDIT:

To be clear, you need to have a script tag pointing to a copy of the jQuery library somewhere before the Bootstrap references, so your head should look similar to:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

You might need to back the jQuery version down, since you're linking to an older version of Bootstrap. If you're getting errors from the Bootstrap source, change the jQuery version to 1.8.3.

Upvotes: 2

Shail
Shail

Reputation: 3649

Jquery is important to be declared before every other script on your page. In header insert the below line before every script.:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

But you also have the wrong syntax to create a dropdown menu . It has to be like below:

        <ul class="nav">
           <li><a href="#">Link</a></li>  
            <li><a href="#">Link</a></li>
             <li class="dropdown"> <!-- this is the item where your dropdown menu will popup-->
             <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>

        <ul class="dropdown-menu"><!-- your drop-down -menu-->
            <li><a href="#">nav1</a>
            </li>
            <li><a href="#">nav2</a>
            </li>
         </ul><!-- dropdown menu ends-->
      </li><!-- li with dropdown ends-->
  </ul><!-- Main nav ends-->

Upvotes: 1

Related Questions