JavaScript模拟下拉菜单代码
2023-06-13 09:14:07 时间
优点:点击body区域同样可以隐藏下拉菜单,且不会和body已有的onclick事件冲突。
缺点:请大家指出,虚心接受!
运行框代码看似繁多,实属无奈,请下载附件,以便更好观察或修改~!
下拉菜单
body{margin:20pxauto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid1px#aaa;position:relative;padding:10px;}
ul{margin:0;padding:0;list-style:none;}
.dropDownList{position:absolute;left:100px;top:100px;}
/*.dropDownListdiv.dropdownselect{display:none;}*/
.dropDownListdiv.dropdown{float:left;margin-right:50px;width:200px;}
.dropDownListspan{display:block;width:146px;height:26px;background:url(http://3.bp.blogspot.com/_bdBPvgEipxw/SRMUkLCdX0I/AAAAAAAAAP8/HgDXLapwpAw/s320/select.gif)lefttopno-repeat;line-height:26px;text-indent:12px;border:solid1px#83BBD9;cursor:default;}
.dropDownListspan.over{background-position:leftbottom;border-color:#B4C91A;}
.dropDownListul{background:#eee;width:200px;display:none;}
.dropDownListulli{height:20px;width:100%;padding:3px0;text-indent:12px;cursor:default;}
.dropDownListulli.over{background:#ccc;}
.dropDownListul.show{display:block;}
缺点:请大家指出,虚心接受!
运行框代码看似繁多,实属无奈,请下载附件,以便更好观察或修改~!
JavaScript模拟下拉菜单,做的仓促,虚心接受批评。
相关文章
- javascript 基础_JavaScript高级编程
- 内卷时代下的前端技术-使用JavaScript在浏览器中生成PDF文档
- 用javascript分类刷leetcode13.单调栈(图文视频讲解)_2023-02-27
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- 图片格式的JavaScript和CSS速查手册
- javascript获取多条数据(模拟ajax获取数据)
- javascript中的array数组使用技巧
- Javascript常考语句107条收集
- Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
- JavaScript设计模式富有表现力的Javascript(一)
- javascript循环变量注册dom事件之强大的闭包
- javascript类和命名空间的模拟代码
- javaScript利用闭包模拟对象的私有属性
- JavaScript和Java的区别浅析
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- 巧用局部变量提升javascript性能
- javascript写的一个模拟阅读小说的程序
- javascript模拟坦克大战游戏(html5版)附源码下载
- javascript对JSON数据排序的3个例子
- 原生javascript实现图片按钮切换