So implementieren Sie die Menüerweiterung und -reduzierung in JQuery (Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Menüerweiterungen und -faltungen (Code) in JQuery. Ich hoffe, dass er für Sie hilfreich ist.

Jquery-Inhalt

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

Tag-Inhalt

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

Verwandte Empfehlungen ：

jQuery Einfache und schöne Navigation menu_html/css_WEB-ITnose

jquery Das einfachste Attribut menu_jquery

jQuery EasyUI-Menüs und -Schaltflächen zum Erstellen einfacher Menüs und Verknüpfen von Buttons_jquery

Coole und praktische jQuery/HTML5-Menügrafiken und -Texte Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Menüerweiterung und -reduzierung in JQuery (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!