Question

我正在尝试使用bootstrap下拉菜单，但我似乎遇到了问题。这是我的HTML：

<head>
    <meta charset="utf-8">
    <title>memberpage</title>
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
 <div class="dropdown" style="margin-bottom:10px;">
        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu test" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" href="">HTML</a></li>
          <li role="presentation"><a role="menuitem" href="">CSS</a></li>
          <li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" href="">About Us</a></li>
        </ul>
      </div>

</div>

我按下按钮显示但是当我点击它时我什么也得不到。我正在使用bootstrap中的默认js和css文件。我希望它只是一个普通的下拉菜单。

[编辑]好的，所以在这里添加jquery之后是我的代码。

<head>
    <meta charset="utf-8">
    <title>memberpage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
 <div class="dropdown" style="margin-bottom:10px;">
        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" href="">HTML</a></li>
          <li role="presentation"><a role="menuitem" href="">CSS</a></li>
          <li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" href="">About Us</a></li>
        </ul>
      </div>

</div>

我仍然没有从页面得到任何东西。我得到了按钮，但没有别的。没有下拉列表或页面没有任何回复。

Answer 1

你忘了jquery，在bootstrap.js

之前添加此内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

引自Bootstrap Javascript，

另请注意，所有插件都依赖于jQuery（这意味着jQuery必须包含在之前插件文件中）。

这对我很有用：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
 <div class="dropdown" style="margin-bottom:10px;">
        <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" href="">HTML</a></li>
          <li role="presentation"><a role="menuitem" href="">CSS</a></li>
          <li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" href="">About Us</a></li>
        </ul>
      </div>

</div>
</body>

我只是使用CDN的文件。 Fiddle

Answer 2

您没有包含 js 文件。请检查所有脚本链接，是否正常。我只包含 js 文件，并为我工作。看一看的 WORKING FIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

bootstrap下拉不下降

2 个答案: