您的位置：首页 > Web前端 > JQuery

夺命雷公狗jquery---37--DWZ左侧折叠菜单实现完整版

2015-10-29 12:34 671 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:125px;
border:1px solid #369;
line-height:25px;
padding-left:10px;
}

div.menu{
height:30px;
line-height:30px;
font-size:14px;
text-indent:10px;
font-weight:bold;
color:#fff;
background-color:#369;
}

</style>
<script src="js/jq8.js"></script>
<script>
$(function(){
$('.menu + div').hide();
$('#a1 + div').show();
$('div.menu').toggle(function(){
var id = this.id;
$('#'+id+'+ div').show();
},function(){
var id = this.id;
$('#'+id+'+ div').hide();
});
});
</script>
</head>
<body>
<div id="a1" class="menu">管理员管理</div>
<div>
添加管理员<br />
删除管理员<br />
跟新管理员<br />
查询管理员<br />
</div>

<div id="a2" class="menu">管理员管理</div>
<div>
添加管理员<br />
删除管理员<br />
跟新管理员<br />
查询管理员<br />
</div>

<div id='a3' class="menu">管理员管理</div>
<div>
添加管理员<br />
删除管理员<br />
跟新管理员<br />
查询管理员<br />
</div>

<div id='a4' class="menu">管理员管理</div>
<div>
添加管理员<br />
删除管理员<br />
跟新管理员<br />
查询管理员<br />
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航