<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: "Microsoft YaHei", serif;
        }

        body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
            margin: 0;
        }

        ol, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            border: none
        }

        #wrap{
            width: 200px;
            margin: 50px auto;
            border: 1px solid #999;
            user-select: none;
        }
        #wrap .title{
            width: 100%;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            text-indent: 5px;
            background: pink;
            color: #fff;
            cursor: pointer;
            border-bottom: 1px dashed #eee;
        }
        #wrap .list{
            display: none;
        }
        #wrap .list.show{
            display: block;
        }
        #wrap .list li{
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            border-bottom: 1px dashed #eee;
            text-indent: 20px;
            cursor: pointer;
        }
        #wrap .list li:hover{
            background-color: #eee;
        }
    </style>
</head>
<body>

<div id="wrap">
    <div class="friend">
        <p class="title">同事</p>
        <ul class="list">
            <li>qq</li>
            <li>ww</li>
            <li>ee</li>
            <li>rr</li>
        </ul>
    </div>
    <div class="friend">
        <p class="title">好友</p>
        <ul class="list">
            <li>tt</li>
            <li>yy</li>
            <li>uu</li>
        </ul>
    </div>
    <div class="friend">
        <p class="title">同学</p>
        <ul class="list">
            <li>ii</li>
            <li>oo</li>
            <li>pp</li>
            <li>aa</li>
            <li>ss</li>
        </ul>
    </div>
</div>
<script>
    let aDiv = document.querySelectorAll("#wrap .title"),
        aList = document.querySelectorAll("#wrap .list");
    let len = aDiv.length;
    let a=0;

    for (let i=0;i<len;i++){
        aDiv[i].onclick = function () {
            // 点击标题div之后，遍历所有的list和标题对应的展开其他的隐藏
            // 用记录值的方法最好
            // for (let j=0;j<len;j++) {
            //     if (i===j){
            //         aList[j].classList.add("show");
            //     } else{
            //         aList[j].classList.remove("show");
            //     }
            // }

            // 三目改写的遍历方法
            for (let j=0;j<len;j++) {
                i===j?aList[j].classList.add("show"):aList[j].classList.remove("show");
                let arrt = i===j?"add":"remove";
                aList[j].classList[arrt]("show");
            }

            // 记录值的方法
            // aList[a].classList.remove("show");
            // a = i;
            // aList[i].classList.add("show");

        }
    }
</script>
</body>
</html>