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-width: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 width: 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-width: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 width: 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>
菜单栏伸缩