javascript模拟select下拉菜单

2024-04-27 14:06:43

字体：大中小

来源：转载

供稿：网友

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'，将当前点击的下拉菜单显示。