今日练习内容是,模仿QQ,用JavaScript实现简单列表折叠功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,h2 {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
#list {
width: 260px;
line-height: 26px;
margin: 0 auto;
border: solid black 1px;
}
#list h2 {
font-size: 20px;
line-height: 30px;
background: dodgerblue url('img/ico1.gif') no-repeat 5px center;/*背景图片在这,那文字如何像右移动?,用如下的文字缩进*/
text-indent:20px;
border-bottom:gray solid 1px;
}
#list ul {
display:none;/*加了display之后,为什么我的边框没有随着收起来?--因为写#list样式的时候固定的高度,如果不固定高度,就会随着内容长度大小的改变而改变*/
}
#list ul li {
border-bottom: solid black 1px;
/*边框大小值会重叠,怎么处理?----设置单边的边框*/
text-indent:24px;
}
#list .active{
background: lightblue url('img/ico2.gif') no-repeat 5px center;
}
#list ul .hover{
background: mistyrose;
}
</style>
<script>
window.onload = function(){
var oList = document.getElementById("list");
var aH2 = oList.getElementsByTagName("h2");
var aUl = oList.getElementsByTagName("ul");
var aLi = null;
var arrLi = [];
for(var i=0; i<aH2.length; i++){
aH2[i].index = i;
aH2[i].onclick = function(){
if(this.className ==""){
aUl[this.index].style.display = "block";
this.className = "active";}
else{
aUl[this.index].style.display = "none";
this.className = "";}
}
}
//学会寻找指定的位置
for(var i=0;i<aUl.length;i++){
aLi=aUl[i].getElementsByTagName("li")//在ul里获取li,并存入到aLi中,所以前面先声明变量为null
for(var j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);//将所有变量存放在数组里
}
}
for(var i=0;i<arrLi.length;i++){
arrLi[i].onclick = function(){
for(var i=0;i<arrLi.length;i++){
arrLi[i].className = "";
}
this.className = "hover";
}
}
}
</script>
</head>
<body>
<ul id="list">
<li class="lis">
<h2 >我的好友</h2>
<ul>
<li>大华</li>
<li>小花</li>
<li>大龙</li>
<li>小龙</li>
</ul>
</li>
<li class="lis">
<h2>我的家人</h2>
<ul>
<li >旭旭</li>
<li>小旭旭</li>
<li>肥旭</li>
<li>胖旭</li>
<li>大胖子</li>
<li>老肥</li>
</ul>
</li>
<li class="lis">
<h2>黑名单</h2>
<ul>
<li>小黑</li>
<li>大黑</li>
</ul>
</li>
</ul>
</body>
</html>
今日反思:
利用for循环,寻找的是具有数列性质的一组数据,但是只是暂时存放,并没有储存;这一点与真正的存放数组变量,之间容易混淆,思考这两点的不同之处。
css的布局是否适当,以及一些细节问题,应当从练习中不断摸索。
点击选中当前所选的内容,有两种方法:
第一个思路:清空当前所有li上的样式,为当前点击内容添加;
第二个思路:清楚前一个点击动作的样式,为当前点击内容添加;思考:如何实现双次点击,取消选中效果?
以下是效果图: