JavaScript模拟下拉菜单代码

所属分类：网络编程 / JavaScript 阅读数： 1950

收藏 0赞 0分享

优点：点击body区域同样可以隐藏下拉菜单，且不会和body已有的onclick事件冲突。
缺点：请大家指出，虚心接受！
运行框代码看似繁多，实属无奈，请下载附件，以便更好观察或修改~！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title>  </head> <body> <h1>JavaScript模拟下拉菜单，做的仓促，虚心接受批评。</h1> <form action="#" method="get"> <div class="dropDownList">     <div id="dropDownList1" class="dropdown">         <select name="birthday">             <option>请选择</option>             <option>1988</option>             <option>1989</option>         </select>         <span>请选择年份</span>         <ul></ul>     </div>     <div id="dropDownList2" class="dropdown">         <select name="sex">             <option>性别</option>             <option>男</option>             <option>女</option>         </select>         <span>请选择性别</span>         <ul></ul>     </div>     <div id="dropDownList3" class="dropdown">         <select name="student">             <option>幼儿班</option>             <option>小学</option>             <option>初中</option>         </select>         <span>请选择学历</span>         <ul></ul>     </div> </div> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

JavaScript模拟下拉菜单代码

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

JavaScript模拟下拉菜单代码

JSONP原理及简单实现

浅析JSONP技术原理及实现

使用Web Uploader实现多文件上传

json的使用小结

非常实用的js验证框架实现源码 附原理方法

js验证框架之RealyEasy验证详解

webpack中引用jquery的简单实现

JavaScript必知必会(五) eval 的使用

JavaScript必知必会(六) delete in instanceof

JavaScript必知必会(七)js对象继承

网络赚钱

站长故事

非常实用的js验证框架实现源码附原理方法