JavaScript模拟下拉菜单代码

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

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

BootStrap数据表格实例代码

基于vue的短信验证码倒计时demo

详解React Native开源时间日期选择器组件(react-native-datetime)

JS库particles.js创建超炫背景粒子插件(附源码下载)

JS库之Waypoints的用法详解

强大的JavaScript响应式图表Chartist.js的使用

详解wow.js中各种特效对应的类名

JS库之Highlight.js的用法详解

详解动画插件wow.js的使用方法

JS库 Highlightjs 添加代码行号的实现代码

网络赚钱

站长故事