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元素中的内容。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢