Jquery中菜单的展开和折叠

标签内容

<form name="aspnetForm" method="post" action="HomePage.aspx" id="aspnetForm">
<div id="main">
<div id="header">
</div>
<div id="mainMenu">
<div id="userInfo">
<div class="photo">
<img alt="" src='images/ico02.gif' />
</div>
<div class="detail">
<p>
您好：<span id="ctl00_lblAdminName">alee</span></p>
<p style="margin-top: 5px;">
<span id="ctl00_lblRoll">宿舍管理员</span>
</p>
</div>
<div class="exitsystem right">
<a href='/Logout.aspx'>
<img src='images/28.ico' alt="" style="width: 22px; height: 22px;" /></a>
</div>
</div>
<div id="navMenu">
<dl id="ctl00_menuPassMgr">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">密码管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SysManager/ChangePassword.aspx'>
修改密码</a></span>
</dd>
</dl>
<dl id="ctl00_menuHourse">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">宿舍管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/SchoolHourseList.aspx'>
学生宿舍查询</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/SchoolHourseEdit.aspx'>
学生宿舍新增</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/CheckStudentDormitory.aspx'>
学生宿舍分配</a></span>
</dd>
</dl>
<dl id="ctl00_menuStudent">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">学生管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/StudentManager/StudentList.aspx'>
学生信息列表</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/StudentManager/StudentEdit.aspx'>
学生信息新增</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/ClassManager/ClassList.aspx'>
班级信息列表</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/ClassManager/ClassEdit.aspx'>
班级信息新增</a></span>
</dd>
</dl>
<dl id="ctl00_menuTeacher">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">教师管理</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherEdit.aspx'>
教师入职登记</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
教师信息查询</a></span>
</dd>
</dl>
<dl id="ctl00_menuReport">
<dt><span>
<img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">缴费及统计报表</a></span>
</dt>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
学生缴费入口</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
学生缴费查询</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
收件信息查看</a></span>
</dd>
<dd>
<span>
<img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'>
发件信息查看</a></span>
</dd>
</dl>
</div>
</div>
<div id="container">

<h1>作业要求</h1>
<p>
实现点击左侧一级菜单的展开和折叠二级菜单的效果
</p>

</div>
<div class="clear"></div>
<div id="footer">
<span>2018&nbsp;学院&nbsp;学生宿舍管理系统</span>
<br />
<span>如有问题，请联系QQ:837597349</span>
</div>
</div>
</form>

jquery内容

<script>

$(function () {

$("dl dt").click(function () {

$(this).siblings().toggle().parent().siblings().children("dd").hide();

});

});

</script>