jqueryでメニューの展開と折りたたみを実装する方法（コード）

この記事の内容は、jquery でのメニュー展開と折りたたみ (コード) の実装方法に関するものです。必要な方は参考にしていただければ幸いです。

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>

関連推奨事項:

jQuery シンプルで美しいナビゲーション menu_html/css_WEB-ITnose

jquery 最も単純な属性 menu_ jquery

シンプルなメニューとリンクボタンを作成するための jQuery EasyUI メニューとボタン_jquery

クールで実用的な jQuery/HTML5 メニューのグラフィックとテキストの説明

以上がjqueryでメニューの展開と折りたたみを実装する方法（コード）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。