您的位置：首页 > 其它

列表展开收缩效果

2018-03-04 20:41 288 查看
该效果模仿qq列表，点击展示具体联系人，再次点击则关闭列表



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-family: "微软雅黑";
}

#friend {
width: 300px;
margin: 50px auto 0;
border-left: 1px solid #ccc;
border-right: 1px solid #dadada;
}

#friend h2 {
width: 270px;
height: 35px;
line-height: 35px;
padding-left: 30px;
background: url(img/icon_lft.png) 10px no-repeat #74a400;
color: #fff;
font-size: 16px;
font-weight: 100;
cursor: pointer;
}

#friend h2.hover {
background: url(img/icon.png) 10px no-repeat #74a400;
}

#friend li {
margin-bottom: 1px;
}

#friend li ul li {
width: 270px;
padding-left: 30px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}

#friend li ul .hover {
background: #EFF4E0;
}

#friend li ul .active {
background: #FFC;
}

#friend li ul {
display: none;
}

#friend li ul.hover {
display: block;
}
</style>
<script>
window.onload = function() {
var oUl = document.getElementById('friend');
var aLi = oUl.getElementsByTagName('li');
var aH = oUl.getElementsByTagName('h2');
var aUl = oUl.getElementsByTagName('ul');
var aLi = null;
var arrLi = [];

// 用于存放id=friend的ul标签里面的li标签
for(var i = 0; i < aUl.length; i++) {
aLi = aUl[i].getElementsByTagName('li');
for(var j = 0; j < aLi.length; j++) {
arrLi.push(aLi[j]); //将获取到的节点存入数组里面
}
}

for(var i = 0; i < aH.length; i++) {
//设置index属性的值
aH[i].index = i;
//每一个h2标签被点击
aH[i].onclick = function() {

//没有class就给他类名hover，反之清空类名
if(this.className == '') {
this.className = 'hover';
aUl[this.index].className = 'hover';
} else {
this.className = '';
aUl[this.index].className = '';

var aLi = aUl[this.index].getElementsByTagName('li');
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = '';
aLi[i].onOff = true;//设置标量值
}

}

};
}

for(var i = 0; i < arrLi.length; i++) {

arrLi[i].onOff = true;
//标量值为true则代表鼠标在上面，添加对应样式
arrLi[i].onmouseover = function() {
if(this.onOff) {
this.className = 'active';
}
};
//设置鼠标移出移除样式
arrLi[i].onmouseout = function() {
if(this.onOff) {
this.className = '';
} else {
this.className = 'hover';
}
};

arrLi[i].onclick = function() {

for(var i = 0; i < arrLi.length; i++) {
if(this != arrLi[i]) {
arrLi[i].className = '';
arrLi[i].onOff = true;
}
}

if(this.onOff) {
this.className = 'hover';
this.onOff = false;
} else {
this.className = '';
this.onOff = true;
}
};
}

}
</script>
</head>

<body>
<ul id="friend">
<li>
<h2>我的好友</h2>
<ul>
<li>张一</li>
<li>张二</li>
<li>张三</li>
</ul>
</li>
<li>
<h2>我的同事</h2>
<ul>
<li>张四</li>
<li>张五</li>
<li>张六</li>
<li>张七</li>
<li>张八</li>
</ul>
</li>
<li>
<h2>我的同学</h2>
<ul>
<li>张九</li>
<li>张十</li>
<li>张十一</li>
</ul>
</li>
</ul>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航