jquery中如何實現選單的展開與折疊（程式碼）-js教程-PHP中文網

首頁

web前端

js教程

jquery中如何實現選單的展開與折疊（程式碼）

不言

Aug 16, 2018 am 11:55 AM

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=&#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>

相關推薦：

jQuery 簡單又漂亮的導覽選單_html/css_WEB-ITnose

jquery 最簡單的屬性選單_jquery

#jQuery EasyUI 選單與按鈕之創建簡單的選單和連結按鈕_jquery

酷炫實用的jQuery/HTML5選單圖文詳解#

以上是jquery中如何實現選單的展開與折疊（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn