素材巴巴 > 程序开发 >

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简介与安装 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。