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.