gpt4 book ai didi

javascript - bootstrap 下拉菜单不下拉

转载 作者:行者123 更新时间:2023-11-30 12:06:48 25 4
gpt4 key购买 nike

我正在尝试让 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>

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

最佳答案

你忘记了 jquery,在 bootstrap.js

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

引自Bootstrap Javascript ,

Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

这很适合我:

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

关于javascript - bootstrap 下拉菜单不下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34972598/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com