效果图::如下
详细代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<title></title>
</head>
<body>
<style>
/* 下拉按钮样式 */
.dropbtn {
background-color: #4CAF50;
width: 200px;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
</div>
</div>
</body>
<script>
$(document).ready(function () {
//设置下拉数组
var items = [{name: "教程1", click: ""},
{name: "教程2", click: ""},
{name: "教程3", click: ""},
{name: "教程4", click: ""}];
//动态生成下拉项
var menuStr = getMenu(items);
//将生成的下拉项填充到指定div里
$('.dropdown-content').html(menuStr);
//下拉项的点击事件
$('div.dropdown-content a').on('click', function (e) {
e.preventDefault();//取消标签自带事件
e.stopPropagation();//防止点击冒泡
var textSelect = $(this).text();
$(".dropbtn").text(textSelect);
$('.dropdown-content').toggle();
});
//确保点击事件之后,再此移动鼠标可显示下拉项
$('.dropbtn').on("mouseenter", function () {
$('.dropdown-content').toggle();
});
function getMenu(item) {
var menuStr = '';
$(items).each(function () {
menuStr += '<a href="#">' + this.name + '</a>'
});
return menuStr;
}
})
</script>
</html>
如果有帮助,别忘了点赞,谢谢!