下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

<style>
.zselect{width:500px;height:50px;line-height:50px;border:1px solid #ccc;position: relative;}
.zselect ul{width:100%;list-style: none;margin: 0px;padding: 0px;position: absolute;z-index: 999;border: 1px solid #ccc;background: #fff;}
.zselect ul li{width:100%;height:50px;line-height:50px;text-align:center;margin: 2px 0px;background: #CCC; display: none; cursor: pointer;}
.zselect ul li:hover{background: #666;}
.zselect ul li.on{display: block; }
</style>
<div class="zselect">
	<ul>
		<li class="on">请选择</li>
		<li>选项一</li>
		<li>选项二</li>
		<li>选项三</li>
		<li>选项四</li>
		<li>选项五</li>
	</ul>
</div>
<script>
	var lis = document.getElementsByClassName('zselect')[0].getElementsByTagName('li');
	for(var i = 0; i < lis.length; i++){
		lis[i].onclick = function(){
			if(this.parentNode.getAttribute('_zxs') == 'show'){
				//for(var j = 0; j < lis.length; j++){ lis[j].className = '';}
				for(var j = 0; j < lis.length; j++){ lis[j].style.display = 'none';}
				this.className = 'on';
				this.style.display = 'block';
				this.parentNode.setAttribute('_zxs','hide');
			}else{
				//for(var j = 0; j < lis.length; j++){ lis[j].className = 'on';}
				for(var j = 0; j < lis.length; j++){ lis[j].style.display = 'block';}
				this.parentNode.setAttribute('_zxs','show');
			}
		};
	}
</script>

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。