百变鹏仔-专注前端行业精选
使用jq实现二级菜单效果,jq下拉菜单效果
作者:鹏仔先生日期:2020-06-19 17:24:27浏览:4831分类: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();
手机扫码访问
猜你还喜欢
- 11-01 vue中实现代码高亮
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-16 table固定表头和列 css实现表格固定表头
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。