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

不言
リリース: 2018-08-16 11:55:55
オリジナル
1808 人が閲覧しました

この記事の内容は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート