您当前的位置：首页 > bootstrap > bootstrap4知识
bootstrap 下拉菜单的使用及实现悬停展开下拉菜单
时间：2020-09-14 11:21:17 来源：米谷网络 作者：
1、我这里使用的bootstrap4.0版本，相比3.0版本，新版本在使用时要在头部引入第三方 Popper.js插件。
这里先放一下头部的所有引用：
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
2、这里先贴一下官网用法的html代码：
(可以参考官方文档https://getbootstrap.net/docs/components/dropdowns/#split-button-dropdowns或者菜鸟教程https://www.runoob.com/bootstrap4/bootstrap4-dropdowns.html)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</body>
</html>
效果如下：
3、然后下面是自己改写的下拉菜单的效果：
主要改写了以下几点：
- 1、将点击下拉菜单改为鼠标悬停展开下拉菜单，主要实现代码如下：(注意两个标签必须一起添加)
//设置鼠标悬停展开下拉菜单
function dropdownOpen(){
$('.dropdown').mouseover(function(){
$(this).addClass('show');
//查找当前元素子节点中的对象，修改其class，这样
//这样当有多个下拉菜单时，可以分别独立处理，而不会出现都下拉的bug
$(this).find(".dropdown-menu").addClass('show');
}).mouseout(function(){
$(this).find(".dropdown-menu").removeClass('show');
$(this).removeClass('show');
});
}
- 2、实现将按钮右侧的下三角图标去除，实现方法：在按钮标签中去掉dropdown-toggle类即可
- 3、减小下拉菜单的宽度，实现方法：通过减小dropdown-menu类div的宽度，即重置其min-width属性来实现，该div标签如下：
<div class="dropdown-menu" style="min-width: unset">
- 4、缩小下拉菜单子标签两边的padding空白以控制子标签的大小和位置，实现方法：设置每个子标签的padding属性，示例代码如下：（这里只放了两个举例说明）
<a class="dropdown-item" style="padding: 4px 10px 4px 10px;" href="#">专委会简介</a>
<a class="dropdown-item " style="padding: 4px 10px 4px 10px;" href="#">组织结构</a>
4、最后放上自己改写的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dropdown</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
dropdownOpen();
});
function dropdownOpen(){
$('.dropdown').mouseover(function(){
$(this).addClass('show');
//查找当前元素子节点中的对象，修改其class，这样
//这样当有多个下拉菜单时，可以分别独立处理，而不会出现都下拉的bug
$(this).find(".dropdown-menu").addClass('show');
}).mouseout(function(){
$(this).find(".dropdown-menu").removeClass('show');
$(this).removeClass('show');
});
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row" style="min-height: 20px"></div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-1">
<div class="dropdown" >
<!-- 去掉dropdown-toggle类，可以将按钮右侧的下三角图标去除-->
<button type="button" class="btn dropdownBtn btn-secondary" data-toggle="dropdown">
专委会介绍
</button>
<!-- 减小menu的宽度可以重置min-width来做到-->
<div class="dropdown-menu" style="min-width: unset">
<!-- 通过设置padding来控制每个子标签的大小和文字位置-->
<a class="dropdown-item" style="padding: 4px 10px 4px 10px;" href="#">专委会简介</a>
<a class="dropdown-item " style="padding: 4px 10px 4px 10px;" href="#">组织结构</a>
<a class="dropdown-item " style="padding: 4px 10px 4px 10px;" href="#">工作条例</a>
<a class="dropdown-item " style="padding: 4px 10px 4px 10px;" href="#">领导成员</a>
<a class="dropdown-item " style="padding: 4px 10px 4px 10px;" href="#">文件资料</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>