jq实现伸缩二级菜单

css

<style>
        li {
            list-style: none;
        }

        li span {
            padding-left: 20px;
            cursor: pointer;
        }

        .open {
            background: url("img/minus.png") no-repeat center left;
        }

        .closed {
            background: url("img/add.png") no-repeat center left;
        }
        ul ul{
            display:none;
        }
    </style>

html

<ul class="tree">
        <li>
            <span class="closed">考勤管理</span>
            <ul>
                <li>日常考勤</li>
                <li>请假申请</li>
                <li>加班/出差</li>
            </ul>
        </li>
        <li>
            <span class="closed">信息中心</span>
            <ul>
                <li>通知公告</li>
                <li>公司新闻</li>
                <li>规章制度</li>
            </ul>
        </li>
        <li>
            <span class="closed">协同办公</span>
            <ul>
                <li>公文流转</li>
                <li>文件中心</li>
                <li>内部邮件</li>
                <li>即时通信</li>
                <li>短信提醒</li>
            </ul>
        </li>
    </ul>

jq

<script>
        $("span").click(function(){
            if($(this).attr("class") == "open"){
                $(this).attr("class","closed");
            }else{
                $(this).attr("class","open");
            }
            $(this).next("ul").toggle();
        });
    </script>