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 DataTable实现前后台动态分页
Jun 17 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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连接mysql数据库代码
2009/03/10 PHP
第五章 php数组操作
2011/12/30 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
使用TensorFlow实现SVM
2018/09/06 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
大二自我鉴定
2014/01/31 职场文书
售后服务承诺书范文
2014/03/26 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
顶岗实习协议书
2015/01/29 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python