CODEWITHSUNDEEP
twitter-bootstrapdrop-down-menu
Edward Tanguay
Edward Tanguay

Reputation: 193302

Bootstrap dropdown won't appear

I'm trying to get some Bootstrap examples to work, which they all have worked so far except for dropdown, what do I need to add/change on this code to make the dropdown appear?

http://jsbin.com/kuhin/2/edit

<!DOCTYPE html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<title>Bootstrap 101 Template</title>
</head>
<body>
<h1>Hello, world!</h1>
<hr/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
<hr/>
<script>
$(function() {
    $('.dropdown-menu').dropdown('toggle');
});
</script>
</body>
</html>

Upvotes: 0

Views: 1153

Answers (2)

danielh
danielh

Reputation: 354

  • You'll want to remove one of the jquery includes as it causes conflict.

  • It appears you've removed the parent div.dropdown container. As mentioned in Bootsrap documentation:

    Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

  • So you need to preserve parent div.dropdown:

<div class="dropdown">
    <a data-toggle="dropdown" href="#">Dropdown trigger</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>
  • As Tim C mentioned, bootstrap.min.js DOES include dropdown functionality and no further includes are necessary.

Upvotes: 1

SASM
SASM

Reputation: 1312

Initially I thought it might also require dropdown.js which is not the case when you include the minified js file as it includes all the necessary plugins.

However you seem to miss to wrap it in a <div class="dropdown">. You can find the fiddle here. Also you are importing jquery twice, remove the import at the bottom.

Upvotes: 2

Related Questions