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卸载全部事件的思路详解
Apr 03 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
js图片处理示例代码
2014/05/12 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python程序中设置HTTP代理
2016/11/06 Python
详解python调度框架APScheduler使用
2017/03/28 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python requests模块实例用法
2019/02/11 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
经典演讲稿范文
2013/12/30 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
专家推荐信模板
2014/05/09 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
学校开除通知书
2015/04/25 职场文书
导游词之海南天涯海角
2019/12/05 职场文书