Twitter Bootstrap 的下拉菜单不起作用 - 不展开答案

【问题标题】：Dropdown Menu of Twitter Bootstrap doesn't work -- doesn't unfoldTwitter Bootstrap 的下拉菜单不起作用 - 不展开
【发布时间】：2016-08-30 11:02:31
【问题描述】：

我在我的网络应用程序中使用 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>

【问题讨论】：

你是否也包含了 jQuery？ Bootstrap 的 js 需要 jQuery。
还请提及引导程序版本？
@yuriy636, v3.3.2
@JazibBashir，是的。
控制台有错误吗？

标签： javascript html css twitter-bootstrap

【解决方案1】：

这是工作代码：

工作小提琴：Dropdown Menu Fix

错误：

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】：

您错过了 Bootstrap 下拉菜单作为切换下拉菜单所必需的以下属性。

role="按钮"
aria-haspopup="true"
aria-expanded="false"

代码片段

<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】：

希望对你有帮助

<!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>

【讨论】：