jQuery点击页面其他部分隐藏下拉菜单功能


Posted in jQuery onNovember 27, 2018

一、开发小要点

    web页面中,我们一般不用select、option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了。

二、代码

    HTML:

<div class="select_box" id="selected">
  <div class="select">
    <span>请选择</span>
  </div>
  <ul class="list">
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
   </ul>
 </div>

    CSS:

<style type="text/css">
   *{margin:0;padding:0}
   ul,ol{list-style: none}
   .select_box{
     position:relative;
     margin:100px auto;
     width:300px;
   }
   .select{
     padding:5px 10px;
     border:1px solid #dedede;
   }
   .select:hover{
     cursor:pointer;
   }
   .select span{
     display: block;
     background:url("../../img/downicon.png") no-repeat right;
   }
   .list{
     display: none;
     position:absolute;
     top:30px;
     width:298px;
     border:1px solid #dedede;
     border-top:none;
   }
   .list li{
     padding:5px 10px;
   }
   .list li:hover{
     background:#ddd;
   }
 </style>

    JS:

$(function(){
   $(".select").click(function(){
    $(".list").toggle();
   })
   $(".list li").click(function(){
    $(".select span").html($(this).html());
    $(".list").hide();
   })
   $(document).bind("click",function(e){
    var e = e || window.event;  //事件对象,兼容IE
    var target = e.target || e.srcElement; //源对象,兼容火狐和IE
    while(target){
      if (target.id && target.id == "selected"){  //循环判断至根节点,防止点击的是#selected和它的子元素
       return;
    }
      target = target.parentNode;
    }
      $(".list").hide();  //点击的不是#selected和它的子元素,隐藏下拉菜单
    })
  })

    效果:

jQuery点击页面其他部分隐藏下拉菜单功能

总结

以上所述是小编给大家介绍的jQuery点击页面其他部分隐藏下拉菜单功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 #jQuery
You might like
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python中logging模块的用法实例
2014/09/29 Python
python实现矩阵乘法的方法
2015/06/28 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python实现自动发送邮件
2018/06/20 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Django 路由控制的实现
2019/07/17 Python
Django实现跨域的2种方法
2019/07/31 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
Linux开机引导的步骤是什么
2015/10/19 面试题
高一学生期末评语
2014/04/25 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书