jQuery实现二级菜单

第一次写博客，共勉！

html代码：

 <div class="tree">               
        <span id="first">所有部门</span>
        <ul class="sec-floor">
            <li class="sec">
                <span>武汉a</span>
                <ul class="thr">
                    <li><a href="">技术部</a></li>
                    <li><a href="">研发部</a></li>
                    <li><a href="">客服部</a></li>
                    <li><a href="">行政部</a></li>
                </ul>
            </li>
            <li class="sec">
                <span>武汉b</span>
                <ul class="thr">
                    <li><a href="">技术部</a></li>
                    <li><a href="">研发部</a></li>
                    <li><a href="">客服部</a></li>
                    <li><a href="">行政部</a></li>
                </ul>
            </li>
            <li class="sec"><span>北京a</span></li>
            <li class="sec"><span>重庆a</span></li>
        </ul>     
    </div>

css代码：

<style>
        .tree{
            font-size: 10pt;
        }
        #first{
            background: url(./img/add.png) no-repeat center left;
            background-size: 15%;
            padding-left: 15pt; 
        } 
        .sec-floor,.thr{
            list-style: none;
            font-size: 8pt;
            padding-left: 15pt;
            display: none; 
        }
        
        .sec>span{
            background: url(./img/add.png) no-repeat center left;
            background-size: 15%;
            padding-left: 15pt;

        }
        .thr li>a{
            text-decoration: none;
            color: #333;
        }
    </style>

js如下：

 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function(){ 
            //一级菜单 
            $("#first").click(function(){
                let secFloor = $(this).next();
                //console.log(secFloor);
                if(secFloor.css('display') === "none"){
                    secFloor.css('display','block');
                    $(this).css('background-image',"url(./img/minus.png)");
                }else{
                    secFloor.css('display','none');
                    $(this).css('background-image',"url(./img/add.png)");
                }
            })
            //二级菜单
            $(".sec>span").click(function(){
                let thrFloor = $(this).next();
                //console.log(thrFloor);
                if(thrFloor.css('display') === 'none'){
                    thrFloor.css('display','block');
                    $(this).css('background-image','url(./img/minus.png)');
                }else{
                    thrFloor.css('display','none');
                    $(this).css('background-image','url(./img/add.png)');
                }
            })
        
        })
    </script>