请教 dropdown 下拉出不来
慕UI2890912
2017-10-16 17:17
照着老师的做下来的 不知道哪里有问题。求大神帮我看下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<title>dropdown</title>
</head>
<body>
<div>
<button class="btn btn-default dropdown-toggle" data-toggle="
dropdown">
这是按钮
<span></span>
</button>
<ul>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
</ul>
</div>
</body>
</html>
4回答
-
- Jodel
- 2020-07-18 14:10:43
看看控制台是不是报错缺少popper.js？
在bootstrap之前引入popper.js即可
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
-
- 慕侠2155777
- 2018-12-29 14:42:04
这个主要就用到两个类名加一个事件
最外侧一个包裹的div加上dropdown类（元素1和元素2是div的子类）
元素1（按钮）：button按钮上绑定data-toggle = "dropdown"事件（此处不一定是button ，a标签也行，但是保证在是带有dropdown类的div的子元素）
元素2（列表）：下拉列表，一般是用ul+li设置，但是这个元素也就是ul标签要带有dropdown-menu类。你也可以用<p class="dropdown-menu"><a>11</a><br/><a>11</a><br/><a>11</a><br/></p>来写，看你个人爱好
至于button上的dropdown-toggle类，这个只是一个样式显示，不影响效果的生成。
-
- 慕UI2890912
- 2017-10-17 10:12:53
我写的时候有加的，但是复制进来没有了。我又重新加进去了。
麻烦再帮我看一下啦。感谢~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
<title>dropdown</title>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="
dropdown">
这是按钮
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
<li>
<a href="#">链接</a>
</li>
</ul>
</div>
</body>
</html>
-
- 归吾兮
- 2017-10-17 00:23:52
两个地方的class没加
<div class="dropdown">
<ul class="dropdown-menu">
另，只加第二个class，ul列表会显示在屏幕下方
bootstrap快速入门
100975 学习 · 187 问题
相似问题