js模拟select下拉菜单控件的代码
更新时间：2013年05月08日 10:33:29 作者：
js模拟select下拉菜单控件的代码，需要的朋友可以参考一下
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>js模拟select</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{background:url('https://www.jb51.net/hxh-hua/478335/o_select.jpg') no-repeat;position:absolute;width:18px;height:18px;top:1px;right:1px; }
</style>
<body>
<div class="select_down" id="sel">
<dl>
<dt>
<h3>select选择</h3>
<a href="javascript:;"></a>
<ul>
<li>jq的select模拟1</li>
<li>jq的select模拟2</li>
<li>jq的select模拟3</li>
</ul>
</dt>
<dt>
<h3>select选择2</h3>
<a href="javascript:;"></a>
<ul>
<li>jq的select模拟11</li>
<li>jq的select模拟22</li>
<li>jq的select模拟31</li>
</ul>
</dt>
</dl>
</div>
<script>
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;
var This = this;
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>
</html>
相关文章
Javascript的getYear、getFullYear、getUTCFullYear异同分享
getYear、getFullYear、getUTCFullYear都是Javascript的Date对象的方法函数2011-11-11
看到一些大型网站，页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，跟着小编一起学习javascript实现图片延迟加载吧2015-08-08
在上一篇中，自谦懒人的咚锵留言指出楼猪改写的format函数在参数输入11个后不起作用了2010-08-08
这篇文章主要为大家详细介绍了JavaScript使用canvas绘制随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章介绍了JS实现切换标签页效果实例代码，有需要的朋友可以参考一下2013-11-11
这篇文章主要为大家详细介绍了JavaScript实现随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
总所周知啊，身为一个合格的前端搬砖工，会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。本文将教大家如何使用原生JS添加进场和退场动画，感兴趣的可以了解一下2022-10-10
js气泡效果，在项目需求中经常遇到。今天小编把大概实现步骤分享到脚本之家平台，感兴趣的朋友可以参考下2016-05-05
这篇文章主要介绍了JS判断是否手机或pad访问实现方法的相关资料,需要的朋友可以参考下2016-12-12
reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧，一起看看吧2017-08-08
最新评论