JavaScript系列---【QQ列表展开及闭合案例】

html代码：

 <ul id="list">
        <li>
            <!-- 标题，联系人-->
            <p><img src="img/ico1.gif" alt="" />朋友</p>
            <ul class="box">
                <li>张珊</li>
                <li>张珊</li>
                <li>张珊</li>
            </ul>
        </li>
        <li>
            <!-- 标题，联系人-->
            <p><img src="img/ico1.gif" alt="" />家人</p>
            <ul class="box">
                <li>李师傅</li>
                <li>李师傅</li>
                <li>李师傅</li>
                <li>李师傅</li>
            </ul>
        </li>
        <li>
            <!-- 标题，联系人-->
            <p><img src="img/ico1.gif" alt="" />陌生人</p>
            <ul class="box">
                <li>发放健康大</li>
                <li>发放健康大</li>
                <li>发放健康大</li>
                <li>发放健康大</li>
            </ul>
        </li>
    </ul>

css代码：

  <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            user-select: none;
        }

        #list {
            width: 300px;
            margin: 50px auto;
        }

        #list p {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: peachpuff;
        }

        #list img {
            margin: 0px 5px;
        }

        .box li {
            background: floralwhite;
        }

        .box li:hover {
            background: cornflowerblue;
        }

        .box {
            display: none;
        }
    </style>

js代码：

 <script>
        // 获取元素
        var list = document.getElementById("list"),
            oPs = list.getElementsByTagName("p"),
            oImgs = list.getElementsByTagName("img"),
            oUls = list.getElementsByTagName("ul");
        console.log(oPs, oImgs, oUls);

        // 绑定事件
        for (var i = 0; i < oPs.length; i++) {
            // 给当前这个p标签绑定事件
            // 自定义属性
            oPs[i].flag = true; //默认收起  
            // 自定义索引
            oPs[i].index = i;
            // 绑定事件
            oPs[i].onclick = function () {
                console.dir(this);
                // 判断
                if (this.flag) { //展开
                    // 让当前这个p标签对应的那个ul显示
                    oUls[this.index].style.display = "block";
                    // 修改自定义属性的值
                    this.flag = false;
                    // 修改图片路径
                    oImgs[this.index].src = "img/ico2.gif";
                } else {
                    // 让当前这个p标签对应的那个ul隐藏
                    oUls[this.index].style.display = "none";
                    // 修改自定义属性的值
                    this.flag = true;
                     // 修改图片路径
                     oImgs[this.index].src = "img/ico1.gif";
                }
            }
        }
    </script>

 效果图：