html——bootstrap下拉菜单的使⽤及实现悬停展开下拉菜单
1、我这⾥使⽤的bootstrap4.0版本，相⽐3.0版本，新版本在使⽤时要在头部引⼊第三⽅ Popper.js插件。
这⾥先放⼀下头部的所有引⽤：
<link rel="stylesheet"href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="/jquery/3.2.1/jquery.min.js"></script>
<script src="/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
2、这⾥先贴⼀下官⽹⽤法的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="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="/jquery/3.2.1/jquery.min.js"></script>
<script src="/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="/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-expan ded="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" >
jquery是什么有什么作用4、缩⼩下拉菜单⼦标签两边的padding空⽩以控制⼦标签的⼤⼩和位置，实现⽅法：设置每个⼦标签的padding属性，⽰例代码如
下：（这⾥只放了两个举例说明）
<a class="dropdown-item" href="#">专委会简介</a>
<a class="dropdown-item " href="#">组织结构</a>
4、最后放上⾃⼰改写的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dropdown</title>
<link rel="stylesheet"href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="/jquery/3.2.1/jquery.min.js"></script>
<script src="/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function(){
dropdownOpen();
});
function dropdownOpen(){
$('.dropdown').mouseover(function(){
$('.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" ></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" >
<!--            通过设置padding来控制每个⼦标签的⼤⼩和⽂字位置-->
<a class="dropdown-item" href="#">专委会简介</a>
<a class="dropdown-item " href="#">组织结构</a>
<a class="dropdown-item "  href="#">⼯作条例</a>
<a class="dropdown-item "  href="#">领导成员</a>
<a class="dropdown-item "  href="#">⽂件资料</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
部分参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。