Geek Answers Handbook

Twitter Bootstrap dropdown not working

Any ideas why this Twitter Bootstrap dropdown is not working?

Javascript in the head:

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

HTML menu:

  <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>
+8
javascript twitter-bootstrap
source share
3 answers

Put the dropdown class in the div that wraps li , not 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>

This example is from the boot 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 to make a nested list, but it did not work with bootstrap. I think this leads to confusion.

+7
source share

Make sure you are using the latest version of jQuery

+2
source share

It is easy to solve. The element wrapping your code is whether, but it should 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 list of classes, for example:

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

My title is as follows:

 <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 can opt out of responsive css if you are not doing anything for mobile devices.

+2
source share

More articles:


All Articles