收缩选择栏.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>运动会管理系统界面</title>
  6. <script src="js/jquery-3.4.1.min.js"></script>
  7. <link rel="stylesheet" href="css/menu.css">
  8. <style type="text/css">
  9. .right{
  10. margin:100px 500px 1000px 50px;
  11. width: 650px;
  12. height: 700px;
  13. float:right ;
  14. text-align:center;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <ul class="menu_list">
  20. <li>
  21. <p class="menu_head">运动员管理</p>
  22. <div class="menu_body">
  23. <a href="#">主题空间</a>
  24. <a href="#">项目任务</a>
  25. <a href="#">工作计划</a>
  26. <a href="#">日程事件</a>
  27. <a href="#">时间视图</a>
  28. </div>
  29. </li>
  30. <li>
  31. <p class="menu_head">体育赛事管理</p>
  32. <div class="menu_body">
  33. <a href="#">主题空间</a>
  34. <a href="#">会议安排</a>
  35. <a href="#">待开会议</a>
  36. <a href="#">已开会议</a>
  37. <a href="#">会议资源</a>
  38. </div>
  39. </li>
  40. <li>
  41. <p class="menu_head">成绩管理</p>
  42. <div class="menu_body">
  43. <a href="#">我的收藏</a>
  44. <a href="#">知识广场</a>
  45. <a href="#">文档中心</a>
  46. <a href="#">我的博客</a>
  47. <a href="#">文档库管理</a>
  48. </div>
  49. </li>
  50. <li>
  51. <p class="menu_head">名次管理</p>
  52. <div class="menu_body">
  53. <a href="#">综合查询</a>
  54. <a href="#">通讯录</a>
  55. <a href="#">便签</a>
  56. <a href="#">计算器</a>
  57. <a href="#">万年历</a>
  58. <a href="#">常用链接</a>
  59. </div>
  60. </li>
  61. </ul>
  62. <script>
  63. // 隐藏所有二级菜单
  64. $('.menu_head+div').hide();
  65. // 需求:单击一个p元素,p元素下面的div就显示出来,显示当前,隐藏其他
  66. $('.menu_head').click(function() {
  67. //设置当前菜单右侧图标样式
  68. $(this).css('backgroundImage', 'url(img/pro_down.png)');
  69. // 显示当前菜单对应的子菜单
  70. $(this).next('div').show();
  71. // 获取其他菜单外层的li元素
  72. var parentli = $(this).parent('li');
  73. var lis = parentli.siblings('li');
  74. // 找到每个li元素下的主菜单,设置主菜单右侧图标样式
  75. lis.children('p').css('backgroundImage','url(img/pro_left.png)')
  76. // 隐藏其他主菜单下的子菜单
  77. lis.children('div').hide();
  78. });
  79. </script>
  80. </body>
  81. </html>