Dropdown Menu of Twitter Bootstrap doesn't work — doesn't unfold
Question
I am using Twitter Bootstrap in my web app and have included bootstrap.css/js files. But when I click on menu base it doesn't unfold and nothing happens.
Any idea what is wrong? Here is my code:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
<ul class="dropdown-menu" aria-labelledby="more-drop">
<li class="dropdown-menuitem">
<a href="/page1">sub menu1</a>
</li>
<li class="dropdown-menuitem">
<a href="/page2">sub menu2</a>
</li>
</ul>
</li>
3 answers
solution1
0 2016-08-30 11:18:09
Here is the Working Code:
Working Fiddle: Dropdown Menu Fix
Mistake :
1- Dropdown Menu 'aria-labelledby' is not defined
2- Anchor Tag ID is not set with 'aria-labelledby' value
aria-labelledby : Identifies the element (or elements) that labels the current element.
<li class="dropdown">
<a id="dropdownMenu1" class="dropdown-toggle" data-toggle="dropdown">menu base</a>
<ul class="dropdown-menu" aria-labelledby="more-drop" aria-labelledby="dropdownMenu1">
<li class="dropdown-menuitem">
<a href="/page1">sub menu1</a>
</li>
<li class="dropdown-menuitem">
<a href="/page2">sub menu2</a>
</li>
</ul>
</li>
solution2
0 2016-08-30 11:21:26
You have missed the following attributes necessary for Bootstrap dropdown to work as toggle dropdown menu.
- role="button"
- aria-haspopup="true"
- aria-expanded="false"
Code Snippet
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script> <ul> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </li> </ul>
solution3
0 2016-08-30 13:13:43
Hope this may helps you
<!DOCTYPE html> <html> <head> <title>dropdown menu of twitter bootstrap doesn't work — doesn't unfold</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu base <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">sub menu1</a></li> <li><a href="#">sub menu2</a></li> </ul> </li> </body> </html>
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.