jQuery点击页面其他部分隐藏下拉菜单功能
更新时间：2018年11月27日 10:30:26 作者：crackedlove
这篇文章主要介绍了jQuery点击页面其他部分隐藏下拉菜单功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
一、开发小要点
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 ctrl+Enter shift+Enter实现代码
jQuery中对键盘事件进行了修正 调用函数的时候传入事件即可。2010-02-02
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
cookie 是存储于访问者计算机中的变量。这篇文章主要介绍了jQuery利用cookie 实现本地收藏功能不重复无需多次命名,需要的朋友可以参考下2019-11-11
下面小编就为大家带来一篇JQuery页面随滚动条动态加载效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02![jQuery中[attribute]选择器用法实例](//img.jbzj.com/images/xgimg/bcimg3.png)
这篇文章主要介绍了jQuery中[attribute]选择器用法,以实例形式分析了[attribute]选择器的功能、定义及匹配给定元素属性的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery选择器源码解读（五）：tokenize的解析过程
这篇文章主要介绍了jQuery选择器源码解读（五）：tokenize的解析过程,本文用详细的注释解读了tokenize方法的解析过程,需要的朋友可以参考下2015-03-03
本篇文章主要介绍了easyUI实现类似搜索框关键词自动提示功能示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
本文给大家汇总介绍了几个常用的jquery实现简易的移动端验证表单，非常的实用，有需要的小伙伴可以进来参考下。2015-11-11
这篇文章主要为大家详细介绍了jQuery实现移动端悬浮拖动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了jQuery表单验证插件解析(推荐)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jQuery移动web开发中的页面初始化与加载事件,是JavaScript移动端页面开发学习中的基础知识,需要的朋友可以参考下2015-12-12
![jQuery中[attribute]选择器用法实例](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论