模仿QQ，实现列表简单折叠

来源：互联网发布：淘宝图标图片编辑：程序博客网时间：2024/05/22 16:53

今日练习内容是，模仿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上的样式，为当前点击内容添加；
第二个思路：清楚前一个点击动作的样式，为当前点击内容添加；
思考：如何实现双次点击，取消选中效果？

以下是效果图：
这里写图片描述

阅读全文

0 0