描述: 点击朋友/家人/陌生人, 显示/收起对应列表
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ列表</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#wrap{
width: 430px;
margin: 20px auto;
}
.list h3{
font: normal 20px/50px "微软雅黑";
width: 430px;
height: 50px;
background-color: #FEDAB8;
}
.list h3 > img{
width: 12px;
height: 12px;
padding-left: 8px;
}
.list > ul{
display: none;
}
.list > ul > li{
line-height: 30px;
}
</style>
</head>
<body>
<!-- 1.布局 -->
<ul id="wrap">
<li class="list">
<h3><img src="./images/ico1.gif" alt=""> 朋友</h3>
<ul>
<li>进击的企鹅</li>
<li>又见一帘幽梦</li>
<li>梦回大唐</li>
</ul>
</li>
<li class="list">
<h3><img src="./images/ico1.gif" alt=""> 家人</h3>
<ul>
<li>外公</li>
<li>父亲</li>
<li>表哥</li>
</ul>
</li>
<li class="list">
<h3><img src="./images/ico1.gif" alt=""> 陌生人</h3>
<ul>
<li>中国移动</li>
<li>多伦多地产经纪</li>
<li>娅娅</li>
</ul>
</li>
</ul>
<script>
/*
描述: 滑入每一个h3标签, 将h3后面的ul>li标签显示出来
*/
// 2.1 获取盒子wrap, 元素h3, ul, img
var wrap = document.getElementById('wrap');
// 通过父元素来获取子元素
var h3 = wrap.getElementsByTagName('h3');
var ul = wrap.getElementsByTagName('ul');
var img = wrap.getElementsByTagName('img');
console.log(wrap, h3, ul, img);
// 2.2 给每一个h3添加划入事件
for(var i = 0; i < h3.length; i++){
// 自定义索引记录下此时i的值
h3[i].index = i;
// 获取此时h内的img元素
// 添加点击事件
h3[i].onclick = function(){
// 激活此时点击的h3和 ul
if(this.className == ''){
// 打印出此时的自定义索引值
console.log(this.index);
// 将对应的ul显示出来
ul[this.index].style.display = 'block';
// 改变小图标
img[this.index].src = './images/ico2.gif';
// 将h3设为激活状态
this.className = 'active';
}else{
// 不激活 h3, 则隐藏ul
ul[this.index].style.display = 'none';
// 改变小图标
img[this.index].src = './images/ico1.gif';
// 取消active设置
this.className = '';
}
}
}
</script>
</body>
</html>