weiyong
/
201912G01


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>运动会管理系统界面</title>
		<script src="js/jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="css/menu.css">
		<style type="text/css">
		.right{
			    margin:100px 500px 1000px 50px;
				width: 650px;
				height: 700px;
				float:right ;
				text-align:center;
			}
	</style>
	</head>
	<body>
		<ul class="menu_list">
		  <li>
		    <p class="menu_head">运动员管理</p>
		    <div class="menu_body">
		      <a href="#">主题空间</a>
		      <a href="#">项目任务</a>
		      <a href="#">工作计划</a>
		      <a href="#">日程事件</a>
		      <a href="#">时间视图</a>
		    </div>
		  </li>
		  <li>
		    <p class="menu_head">体育赛事管理</p>
		    <div class="menu_body">
		      <a href="#">主题空间</a>
		      <a href="#">会议安排</a>
		      <a href="#">待开会议</a>
		      <a href="#">已开会议</a>
		      <a href="#">会议资源</a>
		    </div>
		  </li>
		  <li>
		    <p class="menu_head">成绩管理</p>
		    <div class="menu_body">
		      <a href="#">我的收藏</a>
		      <a href="#">知识广场</a>
		      <a href="#">文档中心</a>
		      <a href="#">我的博客</a>
		      <a href="#">文档库管理</a>
		    </div>
		  </li>
		  <li>
		    <p class="menu_head">名次管理</p>
		    <div class="menu_body">
		      <a href="#">综合查询</a>
		      <a href="#">通讯录</a>
		      <a href="#">便签</a>
		      <a href="#">计算器</a>
		      <a href="#">万年历</a>
		      <a href="#">常用链接</a>
		    </div>
		  </li>
		</ul>
    <script>
        // 隐藏所有二级菜单
        $('.menu_head+div').hide();
        // 需求：单击一个p元素，p元素下面的div就显示出来，显示当前，隐藏其他
        $('.menu_head').click(function() {
            //设置当前菜单右侧图标样式
	    $(this).css('backgroundImage', 'url(img/pro_down.png)');
            // 显示当前菜单对应的子菜单
            $(this).next('div').show();
            // 获取其他菜单外层的li元素
            var parentli = $(this).parent('li');
            var lis = parentli.siblings('li');
            // 找到每个li元素下的主菜单，设置主菜单右侧图标样式
            lis.children('p').css('backgroundImage','url(img/pro_left.png)')
            // 隐藏其他主菜单下的子菜单
            lis.children('div').hide();
        });
    </script>
	</body>
</html>