实现伸缩二级菜单

来源：互联网发布：汽车月供怎么算法编辑：程序博客网时间：2024/04/30 02:09
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>07_实现伸缩二级菜单</title>    <script src="jquery-1.11.3.js"></script>    <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;        }        .show {            display: block;        }        .hide {            display: none;        }    </style></head><body>    <ul class="tree">        <li>            <span class="open">考勤管理</span>            <ul class="show">                <li>日常考勤</li>                <li>请假申请</li>                <li>加班/出差</li>            </ul>        </li>        <li>            <span class="closed">信息中心</span>            <ul class="hide">                <li>通知公告</li>                <li>公司新闻</li>                <li>规章制度</li>            </ul>        </li>        <li>            <span class="closed">协同办公</span>            <ul class="hide">                <li>公文流转</li>                <li>文件中心</li>                <li>内部邮件</li>                <li>即时通信</li>                <li>短信提醒</li>            </ul>        </li>    </ul>    <script>        // 1. 为span元素绑定click事件$("span").click(function(){// 2. 事件的处理函数 - 判断当前span元素的样式// 定位触发click事件的spanif($(this).hasClass("open")){// 3. 当前class为open,改为closed,ul的class改为hide$(this).attr("class","closed");$(this).next().attr("class","hide");}else{// 4. 当前class为closed,改为open,ul的class改为show$(this).attr("class","open");$(this).next().attr("class","show");}});    </script></body></html>
0 0