专注前端行业精选
使用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
暂无评论,来添加一个吧。