- .zs">
- <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>
- //该片段来自于http://www.codesnippet.cn/detail/111120137051.html
来源: http://www.codesnippet.cn/detail/111120137051.html