この記事の内容は、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='images/ico03.gif' /> </span> <span> <a href="javascript:">密码管理</a></span> </dt> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span> <a href='/SysManager/ChangePassword.aspx'>修改密码</a></span> </dd> </dl> <dl id="ctl00_menuHourse"> <dt><span> <img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">宿舍管理</a></span> </dt> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/SchoolHourseList.aspx'> 学生宿舍查询</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/SchoolHourseEdit.aspx'> 学生宿舍新增</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/SchoolHourseManager/CheckStudentDormitory.aspx'> 学生宿舍分配</a></span> </dd> </dl> <dl id="ctl00_menuStudent"> <dt><span> <img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">学生管理</a></span> </dt> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/StudentManager/StudentList.aspx'> 学生信息列表</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/StudentManager/StudentEdit.aspx'> 学生信息新增</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/ClassManager/ClassList.aspx'> 班级信息列表</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/ClassManager/ClassEdit.aspx'> 班级信息新增</a></span> </dd> </dl> <dl id="ctl00_menuTeacher"> <dt><span> <img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">教师管理</a></span> </dt> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherEdit.aspx'> 教师入职登记</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'> 教师信息查询</a></span> </dd> </dl> <dl id="ctl00_menuReport"> <dt><span> <img alt="" src='images/ico03.gif' /></span> <span><a href="javascript:">缴费及统计报表</a></span> </dt> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'> 学生缴费入口</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'> 学生缴费查询</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'> 收件信息查看</a></span> </dd> <dd> <span> <img alt="" src='images/ico06.gif' /></span> <span><a href='/TeacherManager/TeacherList.aspx'> 发件信息查看</a></span> </dd> </dl>
関連推奨事項:
jQuery シンプルで美しいナビゲーション menu_html/css_WEB-ITnose
シンプルなメニューとリンクボタンを作成するための jQuery EasyUI メニューとボタン_jquery
クールで実用的な jQuery/HTML5 メニューのグラフィックとテキストの説明
以上がjqueryでメニューの展開と折りたたみを実装する方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。