一、先看效果图
二、简单实现一下代码
首先你要引入jQuery.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
</head>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.downorder {
width: 88px;
height: 32px;
font-size: 14px;
border: 1px solid #eee;
border-radius: 4px;
position: relative;
margin: 100px;
}
.order {
height: 100%;
color: #666;
display: flex;
justify-content: left;
align-items: center;
padding-left: 10px;
}
.order::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 5px;
display: inline-block;
background: url(../../img/select1.png) no-repeat center/100% 100%;
}
.downtext {
border-radius: 4px;
overflow: hidden;
border: 1px solid #eee;
background-color: #fff;
position: absolute;
top: 32px;
left: 0;
z-index: 10;
/* display: none; */
}
.downtext a {
width: 100%;
height: 32px;
display: inline-block;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #666;
}
</style>
<body>
<!--下拉菜单-->
<div class="downorder">
<p class="order">
下拉菜单
</p>
<div class="downtext">
<a href="#">text1</a>
<a href="#">text2</a>
<a href="#">text3</a>
<a href="#">text4</a>
</div>
</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script>
// 下拉菜单
$(function () {
$(".downtext").hide();
$(".order").click(function () {
$(".downtext").slideToggle();
})
$(".downtext a").click(function () {
var index = $('.downtext a').index(this);
var a = document.querySelectorAll(".downtext a");
$(".order").text(a[index].innerHTML);
$(".downtext").hide();
})
})
</script>
</body>
</html>
