码迷,mamicode.com
首页 > 其他好文 > 详细

7菜单收缩展开

时间:2014-06-14 12:05:19      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

 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>

 

7菜单收缩展开,布布扣,bubuko.com

7菜单收缩展开

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/sumg/p/3787782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!