1-5 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现编写以下菜单效果

任务

任务要求：

点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。

index.html 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style type="text/css">
  7.     *{margin:0;
  8.      padding:0;
  9.      font-size:13px;
  10.      list-style:none;}
  11.  
  12. .menu{width:210px;
  13.       margin:50px auto;
  14.       border:1px solid #ccc;}
  15.  
  16. .menu p{height:25px;
  17.         line-height:25px;
  18.         font-weight:bold;
  19.         background:#eee;
  20.         border-bottom:1px solid #ccc;
  21.         cursor:pointer;
  22.         padding-left:5px;}
  23.  
  24. .menu div ul{display:none;}
  25.  
  26. .menu li{height:24px;
  27.          line-height:24px;
  28.          padding-left:5px;}
  29. </style>
  30. 	<script type="text/javascript">
  31. 	window.onload=function(){
  32.  
  33.       // 将所有点击的标题和要显示隐藏的列表取出来
  34.  
  35.      // 遍历所有要点击的标题且给它们添加索引及绑定事件
  36.  
  37.      // 获取点击的标题上的索引属性，根据该索引找到对应的列表
  38.  
  39.      // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
  40.  
  41. 	}
  42. 	</script>
  43. </head>
  44. <body>
  45. 	<div class="menu" id="menu">
  46. 		<div>
  47. 			<p>Web前端</p>
  48. 			<ul style="display:block">
  49. 				<li>JavaScript</li>
  50. 				<li>DIV+CSS</li>
  51. 				<li>jQuery</li>
  52. 			</ul>
  53. 		</div>
  54. 		<div>
  55. 			<p>后台脚本</p>
  56. 			<ul>
  57. 				<li>PHP</li>
  58. 				<li>ASP.net</li>
  59. 				<li>JSP</li>
  60. 			</ul>
  61. 		</div>
  62. 		<div>
  63. 			<p>前端框架</p>
  64. 			<ul>
  65. 				<li>Extjs</li>
  66. 				<li>Esspress</li>
  67. 				<li>YUI</li>
  68. 			</ul>
  69. 		</div>
  70. 	</div>
  71. </body>
  72. </html>
下一节