JavaScript模拟下拉菜单代码

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

收藏 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模拟下拉菜单代码

深入解析Vue 组件命名那些事

Vue学习笔记进阶篇之vue-cli安装及介绍

jquery版轮播图效果和extend扩展

jQuery Validate格式验证功能实例代码（包括重名验证）

Angular.js中angular-ui-router的简单实践

JavaScript实现二维坐标点排序效果

深入理解vue2.0路由如何配置问题

基于bootstrap实现多个下拉框同时搜索功能

JavaScript 值类型和引用类型的初次研究(推荐)

利用jQuery异步上传文件的插件用法详解

网络赚钱

站长故事