<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 > <ul> <li >请选择</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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....