点击列表,显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#ul1{
width: 300px;
background-color: skyblue;
list-style: none;
margin: 20px 20px;
}
#ul1 li{
line-height: 50px;
}
#ul1 li img{
padding-left: 5px;
padding-right: 5px;
}
#ul2{
display: none;
background-color:#fff;
list-style: none;
}
#ul2 li{
line-height: 30px;
}
</style>
</head>
<body>
<ul id="ul1">
<li>
<h4> <img src="./img/ico1.gif" alt="" id="img">亲人</h4>
<ul id="ul2">
<li>胡图图</li>
<li>胡英俊</li>
<li>张小丽</li>
</ul>
</li>
<li>
<h4> <img src="./img/ico1.gif" alt="" id="img">朋友</h4>
<ul id="ul2">
<li>海绵宝宝</li>
<li>派大星</li>
<li>章鱼哥</li>
<li>蟹老板</li>
</ul>
</li>
<li>
<h4> <img src="./img/ico1.gif" alt="" id="img">陌生人</h4>
<ul id="ul2">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>张三</li>
</ul>
</li>
</ul>
<script>
var oUl1=document.getElementById("ul1");
var oUl2=oUl1.getElementsByTagName("ul");
var oH=document.getElementsByTagName("h4");
var oImg=document.getElementById("img");
for(i=0;i<=oH.length;i++){
oH[i].tag=true;
oH[i].index=i;
oH[i].onclick=function(){
if(this.tag==true){
oImg.src="./img/ico2.gif";
this.tag=false;
oUl2[this.index].style.display="block";
}else{
oImg.src="./img/ico1.gif";
this.tag=true;
oUl2[this.index].style.display="none";
}
}
}
</script>
</body>
</html>