jQuery点击页面其他部分隐藏下拉菜单功能

第一，发展小点

在网页中，我们一般不会用选择和选项来达到下拉菜单的效果。因为下拉菜单的样式比较难看，很难美化，我们选择控制ul显示和隐藏来达到同样高挑的效果，但是不能像下拉菜单一样点击页面的其他部分，那怎么办呢？只能由老大哥js控制。

第二，代码

HTML:

div class=' select _ box ' id=' selected ' div class=' select ' SPan请选择/SPan/div ul class=' list ' li01/Lili 02/Lili 03/Lili 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} .选择{ padding:5px 10pxborder:1px实心# dedede} . select : hover { cursor : pointer；} .选择span { display:块；background:url('././img/downicon.png ')无重复右；} .列表{ display:无；位置：绝对；top:30px宽度width:298pxborder:1px实心# dededeborder-top : none；} .列表li { padding:5px 10px} .list Li : hover { background : # DDD；}/样式JS:

$(function(){ $(')。选择')。单击(function(){ $(')。列表')。toggle()；}) $('.列表Li’)。单击(function(){ $(')。选择“跨度”)。html($(this)。html())；$('.列表')。hide()；}) $(文档)。bind('click '，function(e){ var e=e | | window . event；//事件对象，兼容ie var target=e . target | | e . src element；//源对象，兼容Firefox和ie while(target){ if(target . idtarget . id==' selected '){//循环判断到根节点，防止点击#selected及其子元素返回；} target=target.parentNode} $('.列表')。hide()；//它不是#selected及其子元素，隐藏下拉菜单})})效果：

摘要

以上是jQuery点击页面其他部分隐藏边肖介绍的下拉菜单的功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！