jquery中如何实现菜单的展开和折叠（代码）

本篇文章给大家带来的内容是关于jquery中如何实现菜单的展开和折叠（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

jquery内容

<script>
$(function () {
$("dl dt").click(function () {
$(this).siblings().toggle().parent().siblings().children("dd").hide();
});
});
</script>

标签内容

<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>

相关推荐：

jQuery 简单漂亮的导航菜单_html/css_WEB-ITnose

jquery 最简单的属性菜单_jquery

jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮_jquery

炫酷实用的jQuery/HTML5菜单图文详解

以上就是jquery中如何实现菜单的展开和折叠（代码）的详细内容，更多请关注php中文网其它相关文章！