废话不多说,直接上代码: 有注释
1 <head> 2 <title></title> 3 <style type="text/css"> 4 div 5 { 6 border: 1px solid black; 7 width: 100px; 8 } 9 ul .tit, .content 10 { 11 list-style-type: none; 12 } 13 .menu 14 { 15 padding: 0px; 16 margin: 0px; 17 } 18 .tit 19 { 20 background-color:#0094ff; 21 color:White; 22 padding:2px 10px; 23 cursor:pointer; 24 } 25 </style> 26 <script src="js/jquery-1.9.0.js" type="text/javascript"></script> 27 <script type="text/javascript"> 28 $(function () { 29 //一开始直接隐藏菜单 30 $(".content").hide(); 31 //给标题添加点击事件 32 $(".tit").click(function () { 33 //当点击的时候,打开菜单,同时其他的菜单隐藏 34 $(this).next().slideDown().parent().siblings().children(".content").slideUp(); 35 }).first().next().slideDown();//默认之后第一个菜单打开 36 }); 37 </script> 38 </head> 39 <body> 40 <div> 41 <ul class="menu"> 42 <li class="tit">菜单1</li> 43 <li class="content"> 44 <ul> 45 <li>11111</li> 46 <li>11111</li> 47 <li>11111</li> 48 <li>11111</li> 49 </ul> 50 </li> 51 </ul> 52 <ul class="menu"> 53 <li class="tit">菜单2</li> 54 <li class="content"> 55 <ul> 56 <li>22222</li> 57 <li>22222</li> 58 <li>22222</li> 59 <li>22222</li> 60 </ul> 61 </li> 62 </ul> 63 <ul class="menu"> 64 <li class="tit">菜单3</li> 65 <li class="content"> 66 <ul> 67 <li>22222</li> 68 <li>22222</li> 69 <li>22222</li> 70 <li>22222</li> 71 </ul> 72 </li> 73 </ul> 74 </div> 75 </body>