原生JS点击事件如何实现ul部分内容显示与隐藏用
<!-- HTML如下--> <div class="sel"> <ul> <li>深圳<i></i></li> <li>北京</li> <li>上海</li> <li>广州</li> <li>更多</li> </ul> </div><!-- CSS如下--> /*城市下拉框*/.sel { height: 30px; width: 48px; position: relative; margin-left:15px; font-family: simsun;}.sel ul{ width: 100%; position: absolute; top:5px;}.sel li{ padding-left: 5px; line-height: 20px;}.sel li:first-child i{ display: inline-block; width: 8px; height: 8px; background: url(../Images/creditCard/icon_all.png) no-repeat 0 -1170px; margin-left: 5px;}.sel li:not(:first-child){ display: none;}.hover{ background: #fff; border:1px solid #ddd;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
<style>
.sel {
height: 30px;
width: 48px;
position: relative;
margin-left:15px;
font-family: simsun;
}.sel ul{
width: 100%;
position: absolute;
top:5px;
}
.sel li{
padding-left: 5px;
line-height: 20px;
}.sel li:first-child i{
display: inline-block;
width: 8px;
height: 8px;
background: url(../Images/creditCard/icon_all.png) no-repeat 0 -1170px;
margin-left: 5px;
}
.sel li:not(:first-child){
display: none;
}
.hover{
background: #fff;
border:1px solid #ddd;
}
</style>
<script>
onload=function(){
var ul = document.querySelector(".sel ul");
ul.onclick=function(){
var lis = this.querySelectorAll("li:not(:first-child)");
for(var i=0;i<lis.length;i++){
var lisi = lis[i];
var disp = lisi.style.display;
lisi.style.display = disp == "block" ? "none" : "block";
}
}
}
</script>
</head>
<body>
<div class="sel">
<ul>
<li>
深圳
<i>
</i>
</li>
<li>
北京
</li>
<li>
上海
</li>
<li>
广州
</li>
<li>
更多
</li>
</ul>
</div>
</body>
</html>
