jq多级下拉

  <div id="main" class="filter">
        <ul>
            <li>
                <div class="street">区管项目</div>
                <img class="arrow_bot" src="../../img/bot.png" alt="">
                <img class="arrow_top" src="../../img/top.png" alt="" style="display: none;">
            </li>
            <li>
                <div class="types">在建项目</div>
                <img class="arrow_bot" src="../../img/bot.png" alt="">
                <img class="arrow_top" src="../../img/top.png" alt="" style="display: none;">
            </li>
        </ul>
        <div id="mainInfo">
            <div class="filter_items">
                <div class="filter_item active">区管项目</div>
                <div class="filter_item">市管项目</div>
            </div>
            <div class="filter_items">
                <div class="filter_item active">在建项目</div>
                <div class="filter_item">停工项目</div>
            </div>
        </div>
    </div>

  // 筛选
        $("#main ul li").click(function() {
            var _index = ($(this).index())
            // console.log(this)

            // 禁止底层滚动
            $("body").addClass("movemask")

            $("#main ul li").eq(_index).find(".arrow_bot").toggle().parent().siblings().find(".arrow_bot")
                .show()
            $("#main ul li").eq(_index).find(".arrow_top").toggle().parent().siblings().find(".arrow_top")
                .hide()
            $(".mask").show()
            var type = $("#mainInfo").children().eq($(this).index()).attr("class");
            $("#mainInfo").children().removeClass("showit");
            // console.log(type)
            if (type == "filter_items") {
                $("#mainInfo").children().eq($(this).index()).addClass("showit");

            } else {
                $("#mainInfo").children().eq($(this).index()).removeClass("showit");
                $("body").removeClass("movemask")
                $(".mask").hide()
            }
        })

        // 筛选选中
        $(".filter .filter_items .filter_item").click(function() {
            $(this).addClass('active').siblings().removeClass('active')
        })

body,
html {
    background: #F2F2F2;
}

.filter {
    width: 100%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(33, 45, 108, 0.08), 0px -1px 0px 0px #F2F2F2;
    z-index: 9999;
    position: fixed;
    top: 0px;
    left: 0;
}

.filter ul {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    z-index: 9999;
}

.filter ul li {
    height: 40px;
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

.filter .show {
    display: block;
}

.filter .filter_items {
    display: none;
    width: 100%;
    height: auto;
    min-height: 44px;
    background: #FFFFFF;
}

.filter .showit {
    display: block;
}

.filter ul li img {
    width: 16px;
    height: 16px;
    background-size: 100%;
    margin-left: 4px;
}

.filter .filterbox {
    width: 100%;
    height: auto;
    min-height: 44px;
    background: #FFFFFF;
}

.mask {
    background: #000;
    filter: alpha(opacity=50);
    /* IE的透明度 */
    opacity: 0.4;
    /* 透明度 */
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.movemask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.filter .filter_item {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #F2F2F2;
    color: #666666;
}

.filter .active {
    color: #4378BE;
}