随手写的js+css模拟select操作

2014/10/27 40178

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>