Bootstrap dropdown button not working with version 3.3.6
Question
I am trying to follow bootstrap button drop down , but not working.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<div class="dropdown" style="display: block;">
<ul class="dropdown-menu">
<li><a href="#" tabindex="-1">Walter</a></li>
<li><a href="#" tabindex="-1">Bunny</a></li>
<li><a href="#" tabindex="-1">Big Lewaoaski</a></li>
</ul>
</div>
Edit:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="https://bootswatch.com/cosmo/bootstrap.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Components Tutorial</title>
</head>
<body>
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" tabindex="-1">Walter</a></li>
<li><a href="#" tabindex="-1">Bunny</a></li>
<li><a href="#" tabindex="-1">Big Lewaoaski</a></li>
</ul>
</div>
</body>
</html>
1 answers
solution1
2 ACCPTED 2016-03-08 17:29:42
Aside from the missing > if not a typo, you are not including the dropdown button to toggle the menu.
eg
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
So putting that on your current code:
<div class="dropdown" style="display: block;">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" tabindex="-1">Walter</a></li>
<li><a href="#" tabindex="-1">Bunny</a></li>
<li><a href="#" tabindex="-1">Big Lewaoaski</a></li>
</ul>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Twitter Bootstrap Dropdown button not working?
This bootstrap button dropdown is not working. But why?
Why is my bootstrap dropdown button not working?
Bootstrap: Click event not working when button inside bootstrap dropdown
Angular ui-bootstrap: dropdown not working with version 0.13.3
Dropdown working with Bootstrap 4 not working with Bootstrap 5
Bootstrap Dropdown Button
Bootstrap 5 - Dropdown AND Tooltip on Button?
Bootstrap 4 - Dropdown AND Tooltip on Button?
Toggle Button with dropdown - bootstrap
Related Tags