javascript模拟select下拉菜单
javascript模拟select下拉菜单:
由于自带的select下拉菜单确实是不够美观，并且美化的潜力也不够大，所以对外观要求比较高的网站，基本都要使用自定义的select下拉菜单，下面就提供了一个简单的例子供大家参考，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> </head> <style> *{ margin:0; padding:0; } li{ list-style:none; } body{ font:12px "宋体"; color:#666; } .select_down{ margin:100px auto; position:relative; width:600px; min-height:200px; height:auto!important; height:200px; border:1px solid #ccc; padding:20px; border-radius:8px } .select_down dt{ float:left; width:134px; position:relative; margin-right:5px; display:inline; } .select_down h3{ color:#919191; font-size:12px; font-weight:normal; border:1px solid #e5e5e5; height:18px; background:#fbfbfb; line-height:18px; text-indent:8px; } .select_down ul{ width:132px; border:1px solid #e5e5e5; background:#fbfbfb; position:absolute; top:18px; left:0; z-index:1; text-indent:8px; display:none; } .select_down ul li{ height:22px; line-height:22px; cursor:pointer; } .select_down ul li.hover{ background:#f2f2f2; } .select_down dt a{ position:absolute; width:18px; height:18px; top:1px; right:1px; } </style> <script type="text/javascript"> window.onload=function(){ var oflink = document.getElementById('sel'); var aDt = oflink.getElementsByTagName('dt'); var aUl = oflink.getElementsByTagName('ul'); var aH3= oflink.getElementsByTagName('h3'); for(var i=0;i<aDt.length;i++){ aDt[i].index = i; aDt[i].onclick = function(ev){ var ev = ev || window.event; for(var i=0;i<aUl.length;i++){ aUl[i].style.display = 'none'; } aUl[this.index].style.display = 'block'; document.onclick = function(){ aUl[This.index].style.display = 'none'; }; ev.cancelBubble = true; }; } for(var i=0;i<aUl.length;i++){ aUl[i].index = i; (function(ul){ var iLi = ul.getElementsByTagName('li'); for(var i=0;i<iLi.length;i++){ iLi[i].onmouseover = function(){ this.className = 'hover'; }; iLi[i].onmouseout = function(){ this.className = ''; }; iLi[i].onclick = function(ev){ var ev = ev || window.event; aH3[this.parentNode.index].innerHTML = this.innerHTML; ev.cancelBubble = true; this.parentNode.style.display = 'none'; }; } })(aUl[i]); } } </script> <body> <div class="select_down" id="sel"> <dl> <dt> <h3>select选择</h3> <ul> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> </ul> </dt> </dl> <dl> <dt> <h3>select选择</h3> <ul> <li>蚂蚁部落一</li> <li>蚂蚁部落二</li> <li>蚂蚁部落三</li> </ul> </dt> </dl> </div> </body> </html>
以上代码实现了我们预期的效果，完全模拟实现了select下拉菜单的效果，下面简单介绍一下实现过程:
一.实现原理:原理非常的非常的简单，在默认状态下，下拉菜单时隐藏的，当点击的时候，可以将下拉菜单设置为显示状态，当鼠标放在下拉菜单的时候，会为相应的想设置className属性值，这样可以设置背景颜色等属性，当鼠标移开的时候，就会将此className属性值设置为空，也就恢复了默认状态。当鼠标点击下拉框的其他地方时，点击事件都能够冒泡到document，这样就就调用事件处理函数将下拉菜单隐藏。
二.代码注释:
1.var oflink = document.getElementById('sel')，获取id属性值为sel的对象。
2.var aDt = oflink.getElementsByTagName('dt')，获取oflink对象下dt元素对象集合。
3.var aUl = oflink.getElementsByTagName('ul')，获取oflink对象下的ul元素对象集合。
4.var aH3= oflink.getElementsByTagName('h3')，获取oflink对象下的h3元素对象集合。
5.for(var i=0;i<aDt.length;i++){}，使用for遍历dt元素集合。
6.aDt.index = i，为索引值为dt元素创建index属性并复制为i。
7.aDt.onclick = function(ev){}，为索引值为i的dt元素注册onclick事件处理函数。
8.var ev = ev || window.event，兼容各个浏览器的事件对象写法。
9.for(var i=0;i<aUl.length;i++)，遍历所有的ul元素。
10.aUl.style.display = 'none'，将所有的ul元素设置为隐藏，这样就实现了不可能出现两个菜单同时下拉的情况。
11.aUl[this.index].style.display = 'block'，将当前点击的下拉菜单显示。
12.document.onclick = function(){}，为document绑定事件处理函数，当顶级除去dt之外的所有元素都会将二级菜单隐藏。
13.ev.cancelBubble = true，组织事件冒泡，防止触发绑定在document上的onclik事件处理函数。
14.for(var i=0;i<aUl.length;i++)，便利所有的ul元素。
15.aUl.index = i，为第iul元素创建一个index属性并赋值为i。
16.(function(ul){}()，创建并执行一个函数。
17.var iLi = ul.getElementsByTagName('li')，获取ul对象下的所以li元素对象集合。
18.for(var i=0;i<iLi.length;i++)，便利执行ul对象下的所有li元素。
19.iLi.onmouseover = function(){},为li元素注册onmouseover事件处理函数，为li元素添加一个新的class属性。
20.iLi.onmouseout = function(){},为li元素注册onmouseout事件处理函数，移除添加的class属性。
21.iLi.onclick = function(ev){}，li元素注册事件处理函数，可以将当li元素中的设置为h3元素中的内容。
原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0507/888.html
最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8103