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封装的分页组件
Jun 26 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 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/07/03 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
php文件包含的几种方式总结
2019/09/19 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
请假条标准格式规范
2014/04/10 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
个人工作表现评价材料
2014/09/21 职场文书
停车位租赁协议书
2014/09/24 职场文书
公司离职证明标准样本
2014/10/05 职场文书
领导欢送会主持词
2015/07/06 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技