菜单栏伸缩（附jquery-1.12.1.js）

Css:

 1 <style type="text/css">
 2 .leftMenu {
 3     min-width:220px;
 4     width:268px;
 5     margin:40px auto 0 auto;
 6 }
 7 .menu {
 8     border: #bdd7f2 1px solid;
 9     border-top: #0080c4 4px solid;
10     border-bottom: #0080c4 4px solid;
11     background: #f4f9ff repeat-y right;
12     margin-left: 10px;
13 }
14 .menu .ListTitle {
15     border-bottom: 1px #98c9ee solid;
16     display: block;
17     text-align: center;
18     /*position: relative;*/
19     height: 38px;
20     line-height: 38px;
21     cursor: pointer;
22     /*+min-220px;*/
23 
24     +width:100%;
25 }
26 
27 
28 .ListTitlePanel {
29     position: relative;
30 }
31 .leftbgbt {
32     position: absolute;
33     background: no-repeat;
34     width: 11px;
35     height: 52px;
36     left: -11px;
37     top: -4px;
38 }
39 /*.leftbgbt {
40     float:left;
41     background: no-repeat;
42      11px;
43     height: 52px;
44     left: 0px;
45     top: 0px;
46     zoom:1;
47     z-index:200px;
48 }
49 */
50 .leftbgbt2 {
51     position: absolute;
52     background: no-repeat;
53     width: 11px;
54     height: 48px;
55     left: -11px;
56     top: -1px;
57 }
58 .menuList {
59     display: block;
60     height: auto;
61 }
62 .menuList div {
63     height: 28px;
64     line-height: 24px;
65     border-bottom: 1px #98c9ee dotted;
66 }
67 .menuList div a {
68     display: block;
69     background: #fff;
70     line-height: 28px;
71     height: 28px;
72     text-align: center;
73     color: #185697;
74     text-decoration: none;
75 }
76 .menuList div a:hover {
77     color: #f30;
78     background: #0080c4;
79     color: #fff;
80 }
81 </style>

Javascript:

 1 $(document).ready(function() {
 2     var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV
 3     var menuList = $('.menuList');
 4     $('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function(i) {//获取列表的大标题并遍历
 5         $(this).click(function(){
 6             if($(menuList[i]).css('display') == 'none'){
 7                 $(menuList[i]).slideDown(300);
 8             }
 9             else{
10                 $(menuList[i]).slideUp(300);
11             }
12         });
13     });
14 });

Html主体：

 1 <div class="leftMenu">
 2     <div class="menu">
 3     
 4     <div class="menuParent">
 5             <div class="ListTitlePanel">
 6                 <div class="ListTitle">
 7                     <strong>统计表在线填报</strong>
 8                     <div class="leftbgbt"> </div>
 9                 </div>
10             </div>
11             <div class="menuList">
12                 <div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">封面</a></div>
13                 <div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">三、人员情况</a></div>
14             </div>
15         </div>
16     </div>
17     </div>

jquery-1.12.1.js 下载地址：

https://pan.baidu.com/s/1r23gV2pZHZyh6RdFBqhm2w

提取码：p12f

完整代码：

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html>
  5 <head>
  6 <style type="text/css">
  7 .leftMenu {
  8     min-width:220px;
  9     width:268px;
 10     margin:40px auto 0 auto;
 11 }
 12 .menu {
 13     border: #bdd7f2 1px solid;
 14     border-top: #0080c4 4px solid;
 15     border-bottom: #0080c4 4px solid;
 16     background: #f4f9ff repeat-y right;
 17     margin-left: 10px;
 18 }
 19 .menu .ListTitle {
 20     border-bottom: 1px #98c9ee solid;
 21     display: block;
 22     text-align: center;
 23     /*position: relative;*/
 24     height: 38px;
 25     line-height: 38px;
 26     cursor: pointer;
 27     /*+min-220px;*/
 28 
 29     +width:100%;
 30 }
 31 
 32 
 33 .ListTitlePanel {
 34     position: relative;
 35 }
 36 .leftbgbt {
 37     position: absolute;
 38     background: no-repeat;
 39     width: 11px;
 40     height: 52px;
 41     left: -11px;
 42     top: -4px;
 43 }
 44 /*.leftbgbt {
 45     float:left;
 46     background: no-repeat;
 47      11px;
 48     height: 52px;
 49     left: 0px;
 50     top: 0px;
 51     zoom:1;
 52     z-index:200px;
 53 }
 54 */
 55 .leftbgbt2 {
 56     position: absolute;
 57     background: no-repeat;
 58     width: 11px;
 59     height: 48px;
 60     left: -11px;
 61     top: -1px;
 62 }
 63 .menuList {
 64     display: block;
 65     height: auto;
 66 }
 67 .menuList div {
 68     height: 28px;
 69     line-height: 24px;
 70     border-bottom: 1px #98c9ee dotted;
 71 }
 72 .menuList div a {
 73     display: block;
 74     background: #fff;
 75     line-height: 28px;
 76     height: 28px;
 77     text-align: center;
 78     color: #185697;
 79     text-decoration: none;
 80 }
 81 .menuList div a:hover {
 82     color: #f30;
 83     background: #0080c4;
 84     color: #fff;
 85 }
 86 </style>
 87 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.12.1.js"></script>
 88 <script type="text/javascript">
 89 $(document).ready(function() {
 90     var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV
 91     var menuList = $('.menuList');
 92     $('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function(i) {//获取列表的大标题并遍历
 93         $(this).click(function(){
 94             if($(menuList[i]).css('display') == 'none'){
 95                 $(menuList[i]).slideDown(300);
 96             }
 97             else{
 98                 $(menuList[i]).slideUp(300);
 99             }
100         });
101     });
102 });
103 </script>
104 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
105 <title>Insert title here</title>
106 </head>
107 <body>
108 
109 <div class="leftMenu">
110     <div class="menu">
111     
112     <div class="menuParent">
113             <div class="ListTitlePanel">
114                 <div class="ListTitle">
115                     <strong>统计表在线填报</strong>
116                     <div class="leftbgbt"> </div>
117                 </div>
118             </div>
119             <div class="menuList">
120                 <div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">封面</a></div>
121                 <div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">三、人员情况</a></div>
122             </div>
123         </div>
124     </div>
125     </div>
126     
127 </body>
128 </html>

菜单栏伸缩