Twitter Bootstrap的下拉菜单不起作用-无法展开
[英]Dropdown Menu of Twitter Bootstrap doesn't work — doesn't unfold
问题描述
我在Web应用程序中使用Twitter Bootstrap，并且包含bootstrap.css/js文件。 但是，当我单击menu base它不会展开并且什么也没有发生。
知道有什么问题吗？ 这是我的代码：
<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 个解决方案
解决方案1
0 2016-08-30 11:18:09
这是工作代码：
工作小提琴： 下拉菜单修复
错误 ：
1-下拉菜单'aria-labelledby'未定义
2-锚标记ID未设置'aria-labelledby'值
aria-labelledby ：标识标记当前元素的一个或多个元素。
<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>
解决方案2
0 2016-08-30 11:21:26
您已经错过了使Bootstrap下拉菜单用作切换下拉菜单所需的以下属性。
- 角色=“按钮”
- ARIA-haspopup = “真”
- ARIA-扩大= “假”
代码段
<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>
解决方案3
0 2016-08-30 13:13:43
希望这对您有帮助
<!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>
Twitter Bootstrap下拉菜单无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.