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 width: 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>
