菜单导航（显示隐藏，删除添加禁用）须引入jquery

1.html

     <ul class="cw-list cw-top-box">
                            <li class="cw-item">
                                <div class="area_code_t top">
                                    <i class="iconfont icon-AK-LNjiantouyou icon-sanjiao expand"></i> 区号A1
                                </div>
                                <div class="area_i">
                                    <i class="iconfont icon-tianjia1 c_3c97ff area_code_add area_code_add_top"
                                        data-index="A1"></i>
                                    <i class="iconfont icon-shanchu c_c00 area_code_del area_code_del_top"></i>
                                </div>
                                <ul class="cw-list">
                                    <li class="cw-item">
                                        <div class="area_code_t paihao"><i
                                                class="iconfont icon-AK-LNjiantouyou icon-sanjiao expand"></i>排号A1-01
                                        </div>
                                        <div class="area_i">
                                            <i class="iconfont icon-tianjia1 c_3c97ff area_code_add area_code_add_middle"
                                                data-index="A1-01"></i>
                                            <i class="iconfont icon-shanchu c_c00 area_code_del"></i>
                                        </div>
                                        <ul class="cw-list">
                                            <li class="cw-item">
                                                <div class="area_code_t cenghao"><i
                                                        class="iconfont icon-AK-LNjiantouyou icon-sanjiao expand"></i>层号A1-01-01
                                                </div>
                                                <div class="area_i">
                                                    <i class="iconfont icon-tianjia1 c_3c97ff area_code_add area_code_add_last"
                                                        data-index="A1-01-01"></i>
                                                    <i class="iconfont icon-shanchu c_c00 area_code_del"></i>
                                                </div>
                                                <ul class="cw-list last-floor">
                                                    <li class="cw-item l_item cenghao_item">
                                                        <span>A1-01-01-01</span>
                                                        <i class="iconfont icon-jujue l_item_del"></i>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>

2.css

.area_i i:nth-of-type(1){
    margin-right: 15px;
}
.l_item .l_item_del{
    position: absolute;
    top: -19px;
    left: 92px;
    z-index: 9;
    background-color: #fff;
    cursor: pointer;
    color: red;
    display: none;
}
.cw-top-box{
    margin-right: 15px;
}
.cw-list{
    overflow: hidden;
}
.cw-list .cw-item{
    position: relative;
    padding-left: 24px;
}
.cw-item .area_i{
    position: absolute;
    top: 35px;
    transform: translateY(-50%);
    right: 40px;
    cursor: pointer;
    color: #1d1d1d;
}
.area_code_t{
    padding: 20px 24px 20px 54px;
    position: relative;
    border-bottom: 1px solid #F0F7FE;
}
.icon-sanjiao{
    position: absolute;
    left: 36px;
    top: 23px;
    transition: all 0.3s;
    color: #999;
}
.icon-sanjiao.expand{
    transform: rotate(90deg);
}
.last-floor{
    margin-left: 35px;
}
.last-floor .cw-item{
    float: left;
    padding: 0;
}
.last-floor::after{
    clear: both;
    content: "";
    width: 0;
    height: 0;
    display: block;
    visibility: hidden;
}
.last-floor .l_item{
    position: relative;
    float: left;
    text-align: center;
    margin: 14px 10px 14px 0;
    line-height: 30px;
    width: 100px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 2px;
}
.last-floor .l_item:hover{
    border: 1px solid blue;
    color: blue;
}
.last-floor .l_item:hover .l_item_del{
    display: block;
}
.l_item .l_item_del{
    position: absolute;
    top: -13px;
    left: 90px;
    z-index: 9;
    background-color: #fff;
    cursor: pointer;
    color: red;
    display: none;
}
.cw-item .top:hover{
    background-color: #F1F1F1;
}
.cw-item .paihao:hover{
    background-color: #FBFCFF;
}

3.js

    // (区号)显示隐藏
            $('.all_content').on('click', '.area_code_t', function () {
                $(this).siblings('.cw-list').slideToggle();
                $(this).find('.icon-sanjiao').toggleClass('expand');
            })
            // 数字补零
            var minutesFn = (minutes) => {
                return minutes < 10 ? '0' + minutes : minutes;
            }
            //添加删除
            const getIndexFn = (el) => {
                const dataIndex = el.attr('data-index')
                // console.log($(this).parent().siblings('.cw-list').children().length)
                const index = el.parent().siblings('.cw-list').children().length
                return {
                    dataIndex,
                    index,
                }
            }
            var i = 1
            $('.all_content').on('click', '.add_area_code', function () {
                i++
                $(this).parent('.self_userinfo_title').parent('.userinfo_fk').parent('.all_content').append($(`<ul class="cw-list cw-top-box">
                                                    <li class="cw-item">
                                                        <div class="area_code_t top"><i class="iconfont icon-AK-LNjiantouyou icon-sanjiao expand"></i>区号A${i}</div>
                                                        <div class="area_i">
                                                            <i id=`+ 'id2' + ` class="iconfont  icon-tianjia1 c_3c97ff area_code_add area_code_add_top" data-index="A${i}"></i>
                                                            <i class="iconfont icon-shanchu c_c00 area_code_del"></i>
                                                        </div>
                                                        <ul class="cw-list">
                                                        </ul>
                                                    </li></ul>`))

            })
            $('.all_content').on('click', '.area_code_add_top', function () {
                console.log($(this))
                const deltype = $(this).parent().siblings('.area_code_t').attr('del-type')
                // const dataIndex =$(this).attr('data-index')
                console.log($(this).parent().siblings('.cw-list').children().length)
                // const index = $(this).parent().siblings('.cw-list').children().length
                const { dataIndex, index } = getIndexFn($(this))

                console.log(deltype, dataIndex)
                if (deltype !== 'true') {
                    // console.log($(this).parent().siblings('.cw-list').find('.paihao').length);
                    // var p = $(this).parent().siblings('.cw-list').find('.paihao').length
                    // if (!this.h) {
                    //     if (p > 0) {
                    //         this.h = 1
                    //     } else {
                    //         this.h = 0
                    //     }
                    // }
                    // this.h = this.h + 1
                    $(this).parent('.area_i').siblings('.cw-list').append($(`<li class="cw-item">
                                                        <div class="area_code_t paihao"><i class="iconfont icon-AK-LNjiantouyou icon-sanjiao expand"></i>排号${dataIndex}-${minutesFn(index + 1)}</div>
                                                        <div class="area_i ">
                                                            <i class="iconfont icon-tianjia1 c_3c97ff area_code_add area_code_add_middle" data-index="${dataIndex}-${minutesFn(index + 1)}"></i>
                                                            <i class="iconfont icon-shanchu c_c00 area_code_del"></i>
                                                        </div>
                                                        <ul class="cw-list">
                                                        </ul>
                                                    </li>`))
                }

            })
            $('.all_content').on('click', '.area_code_add_middle', function () {
                const deltype = $(this).parent().siblings('.area_code_t').attr('del-type')

                const { dataIndex, index } = getIndexFn($(this))
                if (deltype !== 'true') {
                    // console.log($(this).parent().siblings('.cw-list').find('.cenghao').length);
                    // var p = $(this).parent().siblings('.cw-list').find('.cenghao').length
                    // if (!this.y) {
                    //     if (p > 0) {
                    //         this.y = 1
                    //     } else {
                    //         this.y = 0
                    //     }
                    // }
                    // this.y = this.y + 1
                    $(this).parent('.area_i').siblings('.cw-list').append($(`<li class="cw-item">
                                                        <div class="area_code_t cenghao"><i class="iconfont icon-AK-LNjiantouyou icon-sanjiao expand"></i>层号${dataIndex}-${minutesFn(index + 1)}</div>
                                                        <div class="area_i">
                                                            <i class="iconfont icon-tianjia1 c_3c97ff area_code_add area_code_add_last " data-index="${dataIndex}-${minutesFn(index + 1)}"></i>
                                                            <i class="iconfont icon-shanchu c_c00 area_code_del"></i>
                                                        </div>
                                                        <ul class="cw-list last-floor">
                                                        </ul>
                                                    </li>`))
                }
            })
            $('.all_content').on('click', '.area_code_add_last', function () {
                const deltype = $(this).parent().siblings('.area_code_t').attr('del-type')
                const { dataIndex, index } = getIndexFn($(this))
                if (deltype !== 'true') {
                    // j++;
                    // var j;
                    // console.log($(this).parent().siblings('.cw-list').find('.cenghao_item').length);
                    // var p = $(this).parent().siblings('.cw-list').find('.cenghao_item').length
                    // if (!this.j) {
                    //     if (p > 0) {
                    //         this.j = 1
                    //     } else {
                    //         this.j = 0
                    //     }
                    // }
                    // this.j = this.j + 1
                    $(this).parent('.area_i').siblings('.cw-list').append($(`<li class="cw-item l_item cenghao_item">
                                                                <span>${dataIndex}-${minutesFn(index + 1)}</span>
                                                                <i class="iconfont icon-jujue l_item_del"></i>
                                                            </li>`))
                }
            })
            $('.all_content').on('click', '.area_code_del', function (e) {
                // $(this).parent('.area_i').parent('.cw-item').remove()
                console.log($(this))
                $(this).css("color", "#999")
                $(this).siblings().css("color", "#999")
                console.log($(this).parent().parent())
                $(this).parent().parent().find('.area_code_t').attr('del-type', 'true')
                // console.log( $(this).parents('.cw-list').find('.area_code_t'))
                $(this).parent().parent().find('li').find('i').css("color", "#999")
                $(this).parent().parent().find('li').find('.area_code_del').css("color", "#999")
            })

            $('.all_content').on('click', '.l_item_del', function () {
                // $(this).parent('.l_item').remove();
                $(this).off()
                $(this).css('color', '#999')
            })