1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 * { 8 font-family: 微软雅黑; 9 } 10 11 #leftMenu { 12 border: 1px solid #000; 13 260px; 14 } 15 16 #leftMenu .menu { 17 padding: 0px; 18 margin: 0px; 19 } 20 21 #leftMenu .menu .tit { 22 background-color: #0094ff; 23 color: #fff; 24 padding: 5px 20px; 25 text-align: center; 26 } 27 </style> 28 <script src="Scripts/jquery-1.8.2.min.js"></script> 29 <script type="text/javascript"> 30 $(function () { 31 $(".tit").click(function () { 32 //slideDown展开 33 //slideUp 收缩 34 // $(this).next().slideToggle(); 35 $(this).next().slideDown().parent().siblings().children(".content").slideUp();// 36 }); 37 }); 38 </script> 39 </head> 40 <body> 41 <div id="leftMenu"> 42 <ul class="menu"> 43 <li class="tit">系统管理</li> 44 <li class="content"> 45 <ul> 46 <li content="广州小蛮腰1">广州小蛮腰1</li> 47 <li content="广州小蛮腰2">广州小蛮腰2</li> 48 <li content="广州小蛮腰3">广州小蛮腰3</li> 49 <li content="广州小蛮腰4">广州小蛮腰4</li> 50 <li content="广州小蛮腰5">广州小蛮腰5</li> 51 </ul> 52 </li> 53 54 </ul> 55 56 57 <ul class="menu"> 58 <li class="tit">用户管理</li> 59 <li class="content"> 60 <ul> 61 <li content="广州小蛮腰1">广州小蛮腰1</li> 62 <li content="广州小蛮腰2">广州小蛮腰2</li> 63 <li content="广州小蛮腰3">广州小蛮腰3</li> 64 <li content="广州小蛮腰4">广州小蛮腰4</li> 65 <li content="广州小蛮腰5">广州小蛮腰5</li> 66 </ul> 67 </li> 68 69 </ul> 70 </div> 71 </body> 72 </html>