jq实现多级手风琴效果
程序开发
2023-09-10 06:31:19
/*左侧*/ .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;}left.css
/*公共样式--开始*/ 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; }/*公共样式--结束*/public
头部和左侧菜单
$(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");}});
转载于:https://www.cnblogs.com/dongxiaolei/p/6037668.html
标签:
上一篇:
node-sass简介与安装
下一篇:
相关文章
-
无相关信息