您所在的位置:小祥子 » 编程 » JavaScript » 正文

javascript模拟select下拉菜单

时间:2015-07-21 编辑:我是代码努力 来源:CnBlogs

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

关键词:模拟 菜单