有三个标题菜单，点击其中一个，可以显示其下的隐藏的元素，点击另一个标题菜单，刚才显示的元素能收起，只显示点击的标题菜单的元素
html:
<body>
<div id="menu">
<dl id="dl1">
<dt>学生管理</dt>
<dd>添加学员</dd>
<dd>学员列表</dd>
<dd>修改学生信息</dd>
<dd>删除学员</dd>
</dl>
<dl id="dl2">
<dt>老师管理</dt>
<dd>添加学员</dd>
<dd>学员列表</dd>
<dd>修改学生信息</dd>
<dd>删除学员</dd>
</dl>
<dl id="dl3">
<dt>工作人员管理</dt>
<dd>添加学员</dd>
<dd>学员列表</dd>
<dd>修改学生信息</dd>
<dd>删除学员</dd>
</dl>
</div>
</body>
CSS代码：
<style>
#menu{width: 360px;margin: 0px auto;border: 1px solid #ccc;}
</style>
JS代码：
<script>
$(function(){
$("dd").hide(); //把所有的dd元素隐藏
$("#dl1").bind("click",function(){
$("#dl1 dd").toggle(500); //点击后显示已隐藏的元素
$("#dl4>dd,#dl3>dd,#dl2>dd").hide(500); //当点击下面的dl时，让上面的dd元素隐藏
});
$("#dl2").bind("click",function(){
$("#dl2 dd").toggle(500);
$("#dl4>dd,#dl3>dd,#dl1>dd").hide(500);
});
$("#dl3").bind("click",function(){
$("#dl3 dd").toggle(500);
$("#dl4>dd,#dl1>dd,#dl2>dd").hide(500);
});
});
</script>
565
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
