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>