/*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 238px; height: 100%; background-color: #293038; position: absolute; left: 0; z-index: 99 } .main_R { width: 100%; padding-left: 180px; z-index: -1; } .main_L a { color: #fff; } .main_list1 { cursor: pointer; background-color: #293038; color: #fff; text-align: center; font-size: 16px; } .mainList_a { display: block; width: 100%; height: 50px; line-height: 50px; position: relative; /*padding-left:30px;*/ } .mainList_a b { width: 20px; height: 20px; background: url("left_bg.png") no-repeat -18px -658px; position: absolute; left: 10px; top: 50%; margin-top: -6px; } .mainList_a b.open { background: url("left_bg.png") no-repeat -25px -191px; } .main_list1 ul { display: none; } .main_list1 li a { display: block; height: 40px; line-height: 40px; font-size: 14px; } .main_list1 li a:hover { background-color: #208adb; } .header_user>a span{ display: inline-block; width: 74%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; *zoom: 1; *display: inline; } .main_list ul{display:none;} .main_list2{padding-left:10px;} .main_list3{padding-left:20px;} .main_list4{padding-left:30px;}
/*公共样式--开始*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select { margin: 0; padding: 0; } *{box-sizing: border-box;} html, body { min-height: 100%; } body { font-family: "Microsoft YaHei"; } ul, li { list-style: none; } img { border: none; vertical-align: middle; } a { text-decoration: none; color: #232323; } table { border-collapse: collapse; } input, textarea { outline: none; border: none; } textarea { resize: none; overflow: auto; } .clearfix { zoom: 1; } .clearfix:after { content: "."; width: 0; height: 0; visibility: hidden; display: block; clear: both; } .fl { float: left } .fr { float: right } .tl { text-align: left; } .tc { text-align: center } .tr { text-align: right; } .ellipse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*公共样式--结束*/
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>头部和左侧菜单</title> <link rel="stylesheet" href="public.css"/> <link rel="stylesheet" href="left.css"/> </head> <body> <div class="wrapper"> <div class="main"> <div class="main_L"> <ul> <li class="main_list1"> <a href="javascript:void(0);" class="mainList_a"><b></b>222</a> <ul> <li class="main_list1 list_service"> <a href="javascript:void (0);" class="mainList_a">11</a> </li> <li class="main_list1 list_user"> <a href="javascript:void (0);" class="mainList_a"><b></b>11</a> <ul> <li class="main_list2"> <a href="javascript:void (0);" class="mainList_a"><b></b>11</a> <ul> <li class="main_list3"> <a href="javascript:void (0);" class="mainList_a">11</a> </li> <li class="main_list3"><a href="javascript:void (0);">11</a></li> </ul> </li> <li class="main_list2"><a href="javascript:void (0);">11</a></li> </ul> </li> <li class="main_list1 list_order"> <a href="javascript:void (0);" class="mainList_a"><b></b>11</a> <ul> <li> <a href="javascript:void(0);" class="mainList_a">11</a> <ul> <li><a href="javascript:void(0);">11</a></li> <li><a href="javascript:void(0);">11</a></li> <li><a href="javascript:void(0);">11</a></li> </ul> </li> <li><a href="javascript:void(0);">11</a></li> <li><a href="javascript:void(0);">11</a></li> </ul> </li> <li class="main_list1 list_news"> <a href="javascript:void (0);" class="mainList_a"><b></b>11</a> <ul> <li><a href="javascript:void(0);">11</a></li> </ul> </li> <li class="main_list1 list_out"> <a href="javascript:void (0);" class="mainList_a"><b></b>11</a> <ul> <li> <a href="javascript:void(0);" class="mainList_a">11</a> <ul> <li><a href="javascript:void(0);">11</a></li> </ul> </li> </ul> </li> <li class="main_list1 list_out"> <a href="javascript:void (0);" class="mainList_a"><b></b>11</a> <ul> <li> <a href="javascript:void(0);" class="mainList_a">11</a> <ul> <li><a href="javascript:void(0);">查11</a></li> <li><a href="javascript:void(0);">11</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </body> <script src="jquery-1.11.3.min.js"></script> <script src="common.js"></script> </html>
$(function(){ $(".mainList_a").on("click",function(){ var $this=$(this); var $ul=$(this).siblings("ul"); if($ul.css("display")=="none"){ $this.siblings("ul").slideDown(); $this.find("b").addClass("open"); }else{ $this.siblings("ul").slideUp(); $this.find("b").removeClass("open"); } }); if (screen.width > 1180) { $("html").removeClass("screen1"); } else { $("html").addClass("screen1"); } });