How to implement menu expansion and collapse in jquery (code)

The content of this article is about how to implement menu expansion and folding (code) in jquery. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

jquery content

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

Tag content

<dl id="ctl00_menuPassMgr">
                    <dt><span>
<img alt="" src=&#39;images/ico03.gif&#39; />
</span> 
<span>
<a href="javascript:">密码管理</a></span>
                    </dt>
                    <dd>
                        <span>
<img alt="" src=&#39;images/ico06.gif&#39; /></span> <span>
<a href=&#39;/SysManager/ChangePassword.aspx&#39;>修改密码</a></span>
                    </dd>
                </dl>
                <dl id="ctl00_menuHourse">
                    <dt><span>

                        <img alt="" src=&#39;images/ico03.gif&#39; 
/></span> <span><a 
href="javascript:">宿舍管理</a></span>
                    </dt>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/SchoolHourseManager/SchoolHourseList.aspx&#39;>
                                学生宿舍查询</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/SchoolHourseManager/SchoolHourseEdit.aspx&#39;>
                                学生宿舍新增</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/SchoolHourseManager/CheckStudentDormitory.aspx&#39;>
                                学生宿舍分配</a></span>
                    </dd>
                </dl>
                <dl id="ctl00_menuStudent">
                    <dt><span>

                        <img alt="" src=&#39;images/ico03.gif&#39; 
/></span> <span><a 
href="javascript:">学生管理</a></span>
                    </dt>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/StudentManager/StudentList.aspx&#39;>
                                学生信息列表</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/StudentManager/StudentEdit.aspx&#39;>
                                学生信息新增</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/ClassManager/ClassList.aspx&#39;>
                                班级信息列表</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/ClassManager/ClassEdit.aspx&#39;>
                                班级信息新增</a></span>
                    </dd>
                </dl>
                <dl id="ctl00_menuTeacher">
                    <dt><span>

                        <img alt="" src=&#39;images/ico03.gif&#39; 
/></span> <span><a 
href="javascript:">教师管理</a></span>
                    </dt>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/TeacherManager/TeacherEdit.aspx&#39;>
                                教师入职登记</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/TeacherManager/TeacherList.aspx&#39;>
                                教师信息查询</a></span>
                    </dd>
                </dl>
                <dl id="ctl00_menuReport">
                    <dt><span>

                        <img alt="" src=&#39;images/ico03.gif&#39; 
/></span> <span><a 
href="javascript:">缴费及统计报表</a></span>
                    </dt>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/TeacherManager/TeacherList.aspx&#39;>
                                学生缴费入口</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/TeacherManager/TeacherList.aspx&#39;>
                                学生缴费查询</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/TeacherManager/TeacherList.aspx&#39;>
                                收件信息查看</a></span>
                    </dd>
                    <dd>
                        <span>

                            <img alt="" src=&#39;images/ico06.gif&#39; 
/></span> <span><a 
href=&#39;/TeacherManager/TeacherList.aspx&#39;>
                                发件信息查看</a></span>
                    </dd>
                </dl>

Related recommendations ：

jQuery Simple and beautiful navigation menu_html/css_WEB-ITnose

##jquery The simplest attribute menu_jquery

jQuery EasyUI Menus and Buttons to create simple menus and link buttons_jquery

##Cool and practical jQuery/HTML5 menu graphics and text Detailed explanation

The above is the detailed content of How to implement menu expansion and collapse in jquery (code). For more information, please follow other related articles on the PHP Chinese website!