7菜单收缩展开 

 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>

 

posted @ 2014-06-13 23:57  编程猴子  阅读(206)  评论(0)    收藏  举报