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插件之validation插件
Mar 29 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JQuery样式与属性设置方法分析
Dec 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
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python缩进和冒号详解
2016/06/01 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
中学生国旗下讲话稿
2014/04/26 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
导游词之青城山景区
2019/09/27 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS