前端三级分类展示，点击展开，再次点击折叠

思路注释：
前端数据循环展示在 tr里面。
1.循环出来的数据（tr），首先获取 tr 的 属性
数据的 pid 等于 他的id 说明是他的子集
2.通过循环找出 ID 对应 PID 的数据。通过递归的方式（本身调用本身）把所有的 ID 放到一个数组里面。传给点击事件里面
3.点击事件，点击以后获取相对应的 ID 和 ID下的所有子集，
1）判断长度是否大于0，小于 0 证明没有子集，或者是三级分类，此时不做点开或者折叠操作，大于0，证明有子集，需要把 减号图标变成加号图标，同时给span 的属性更改
2）for 循环递归出来的这个数组， 找到上面定义的 data-openStatus 状态是 1的 ：是展开操作，并且判断下面是否有子集，并且根据给自己的属性，判断子集是否被展开或者收起。

HTML里面的属性：
 <tr  class="showList list-  pid-"  data-id="" data-pid="">tr>
 <span data-openStatus="1" class="symbol" onclick="openClose($(this),<?= $v['id']?>,1)" style="cursor:pointer">
     <img class="img-" src="/cdn/static/common/images/minus.png" width="20px">
span>
JS:
<script>
    function openClose(obj, id) {
        // 操作当前被点击的内容
        // 获取需要被操作的子级分类ID
        let idList = recursionGetIDList(id, []);
        let hideIDList = [];
        if (idList.length > 0) {
            //判断下面没有子集，或者是第三级点击不变 加号
            //data-openStatus=1: 展开  2: 收起
            if (obj.attr('data-openStatus') == 1) {
                obj.attr('data-openStatus', 2);
                $('.img-' + id).attr('src', '/cdn/static/common/images/openClass.png');
            } else {
                obj.attr('data-openStatus', 1);
                $('.img-' + id).attr('src', '/cdn/static/common/images/minus.png');
            }
            for (var i = 0, il = idList.length; i < il; i++) {
                //判断下面没有子集，或者是第三级点击不变 加号
                // 1: 展开  2: 收起
                if (obj.attr('data-openStatus') == 1) {
                    // 已经被收起来的二级, 需要记录三级的ID, 不做展示
                    if ($('.list-' + idList[i]).find('.symbol').attr('data-openStatus') == 2) {
                        $.each($('.pid-' + idList[i]), function () {
                            hideIDList.push($(this).attr('data-id'))
                        });
                    }
                    // 展示未被收起的分类
                    if (hideIDList.indexOf(idList[i]) < 0) {
                        $('.list-' + idList[i]).show();
                    }
                } else {
                    $('.list-' + idList[i]).hide();
                }
            }
        }
    }

    // 递归获取需要被操作的子级分类ID
    function recursionGetIDList(id, idList) {
        $.each($('.showList'), function () {
            let dataPid = $(this).attr('data-pid');
            if (id == dataPid) {
                let personId = $(this).attr('data-id');
                if (personId) {
                    idList.push(personId);

                    recursionGetIDList(personId, idList);
                }
            }
        });
        return idList;
    }
script>