您的位置：首页 > 编程语言

实现伸缩二级菜单

2016-10-23 09:04 295 查看 
<!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事件的span
if($(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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  二级菜单代码
相关文章推荐
新的分享
章节导航