引导下拉列表不下降

bootstrap drop down not dropping down

本文关键字：下拉列表      更新时间：2023-09-26

我正在尝试让引导下拉菜单工作，但我似乎出了点问题。这是我的网页：

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

得到按钮显示，但当我单击它时，我什么也得不到。我正在使用引导程序的默认 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>

我仍然没有从页面上得到任何东西。我得到了按钮，但没有别的。没有下拉菜单，也没有来自页面的任何响应。

你忘了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。小提琴

你没有包含js文件。请检查所有脚本链接，是否可以。我只包括js文件及其对我的工作。看看工作小提琴。

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

相关文章：