Twitter Bootstrap的下拉菜单不起作用——没有展开

Dropdown Menu of Twitter Bootstrap doesn't work -- doesn't unfold

本文关键字：不起作用 Bootstrap 下拉菜单 Twitter      更新时间：2023-09-26

我在我的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>

工作代码:

Working Fiddle:下拉菜单修复

:

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>

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

  • 角色= "按钮"
  • 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>

希望这对你有帮助

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

相关文章：