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

最新推荐文章于 2019-03-30 20:04:59 发布

liuxiaoyu108

最新推荐文章于 2019-03-30 20:04:59 发布

阅读量380

点赞数 1

分类专栏： JavaScript 文章标签： javascript 列表折叠

本文链接：https://blog.csdn.net/Candice_L/article/details/77131068

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今日练习内容是，模仿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>