這個下拉菜單，一般大多數人都選擇使用ui框架，但是也有人還是需要jq實現的，寫個demo分享給大家
DEMO下載
https://download.csdn.net/download/tianpeng1996/12536037
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq實現下拉菜單效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 300px;
box-sizing: border-box;
}
ul li {
list-style: none;
}
.choose-input-box{
width: 200px;
position: relative;
left: 0;
border: 1px solid #d7dff2;
background: #fff;
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0,0,0,.1);
}
.choose-input {
width: 100%;
}
.choose-input input {
color: #333333;
font-size: 14px;
width: 100%;
height: 32px;
line-height: 30px;
border: 1px solid #d2d2d2;
text-indent: 15px;
box-sizing: border-box;
outline: none;
}
.choose-input-ul {
width: 100%;
position: absolute;
left: 0;
top: 33px;
z-index: 10;
border: 1px solid #d7dff2;
background: #fff;
box-sizing: border-box;
box-shadow: 0 2px 5px rgba(0,0,0,.1);
border-top: none;
}
.choose-input-ul li {
color: #666666;
font-size: 14px;
width: 100%;
padding: 10px;
box-sizing: border-box;
cursor: pointer;
}
.choose-input-ul .active {
color: #fff;
background: #008df7;
}
</style>
</head>
<body>
<div class="choose-input-box">
<div class="choose-input">
<input type="text" placeholder="請選擇" value="鵬仔先生" class="">
</div>
<ul class="choose-input-ul" style="display: none;">
<li>第一條</li>
<li>第二條</li>
<li class="active">第三條</li>
<li>第四條</li>
</ul>
</div>
</body>
</html>
<script>
// 下拉菜單-內容點擊收縮展開
$('.choose-input').on('click',function(e){
if ($(this).siblings('ul').css('display') == "none") {
//展開
$(this).siblings('ul').slideDown(300);
}else{
//收縮
$(this).siblings('ul').slideUp(300);
}
e.stopPropagation();
});
// 選擇菜單（不用寫組織冒泡，所以選擇後會自動隱藏）
$(".choose-input-ul li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
$(this).parent().siblings().children().val($(this).text());
})
// 點擊頁面任意區域隱藏所有的下拉菜單
$(document).click(function(){
$('.choose-input-ul').slideUp(300);
})
// 鵬仔先生
// 前端共享博客 http://sharedblog.cn
</script>
個人博客
前端博客 http://sharedblog.cn
資源博客 http://iqzhan.com