Question

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

Answer 1

这是工作代码：

工作小提琴：Dropdown Menu Fix

<强>错误：

1-下拉菜单＆＃39; aria-labelledby＆＃39;未定义

2-锚标记ID未设置为＆＃39; aria-labelledby＆＃39;值

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>

Answer 2

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

角色=＆＃34;按钮＆＃34;
咏叹调-haspopup =＆＃34;真＆＃34;
咏叹调发泡=＆＃34;假＆＃34;

代码段

＆＃13;

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

＆＃13;

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

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

3 个答案:

代码段