zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript模拟下拉菜单代码

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模拟下拉菜单,做的仓促,虚心接受批评。