专注前端行业精选
使用jq实现二级菜单效果，jq下拉菜单效果
作者：鹏仔先生日期：2020-06-19 17:24:27浏览：3582分类：JavaScript
这个下拉菜单，一般大多数人都选择使用ui框架，但是也有人还是需要jq实现的，写个demo分享给大家
<!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://sharedbk.com
</script>如果阻止冒泡报错，那就使用
window.event.stopPropagation();
猜你还喜欢
- 09-14 nvm常用命令有哪些？nvm如何切换node版本？nvm如何下载node？
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参，微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载（以及下载跨域问题分析）
- 07-08 uniapp调用地图，进行位置查询，标记定位
- 11-05 js截取字符串前几位或者截取字符串后几位
- 10-25 js替换字符串某个字符，js修改字符串中指定字符
- 10-20 uniapp中text-indent不起作用，uniapp首行缩进不管用如何解决？
- 09-26 vue给单独组建的body添加类名
- 08-12 elemtnui 表格如何修改某行文字颜色
- 08-03 vue中调用百度地图 获取经纬度
- 07-09 uniapp小程序实现录音 uniapp小程序长按录音 点击播放等功能（CSS实现语音音阶动画效果）
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论，来添加一个吧。