jq实现多级手风琴效果
/*左侧*/
.wrapper, .main {
height: 100%;
z-index: 9
} .main {
position: relative;
} .main_L {
width: 238px;
height: 100%;
background-color: #293038;
position: absolute;
left:;
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:;
*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:;
padding:;
}
*{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:;
} .clearfix:after {
content: ".";
width:;
height:;
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
<!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");
}
});
jq实现多级手风琴效果的更多相关文章
- jq实现简单手风琴效果
文章地址:https://www.cnblogs.com/sandraryan/ 利用slideUp slideDown动画 <!DOCTYPE html> <html lang=& ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
- jQuery实现多级手风琴树形下拉菜单（源码）
前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
随机推荐
- 深入理解C语言中的指针与数组之指针篇
转载于http://blog.csdn.net/hinyunsin/article/details/6662851 前言 其实很早就想要写一篇关于指针和数组的文章,毕竟可以认为这是C语言的根本 ...
- linux下的./本质
不知道从什么时候对于./的感觉就是这是一条运行命令,因为你要运行某个文件的时候就用./ 但是这个显然是错误的./表述的是当前目录 .就是表示当前目录的.至于为什么运行当前目录下的 文件需要加上./原因 ...
- 调用REST接口获取数据
/// <summary> /// 根据机构代码本机构下报警用户列表: /// </summary> /// <param name="org_code&quo ...
- QCom MSM MDP显示驱动一些点的简记
简要记录了Qualcom MSM8xxx MDP Framebuffer驱动中的一些点. Framebuffer设备的sysfs 330static int msm_fb_create_sysfs(s ...
- Atlassian如何实施DevOps
DevOps是推动开发和运维团队之间沟通和协作的手段.它不是一个工具或产品.相反,其成功的首要因素就是文化.目的是更快的创新和更好的客户体验. "2015年DevOps状态报告"调 ...
- Know How To Use ID_NULL Function To Search An Object In Oracle Forms
ID_NULL built in function is used to determine that an object type variable is null or not null in O ...
- [HDOJ5723]Abandoned country（最小生成树，期望）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5723 题意:求最小生成树,并且求这棵最小生成树上所有边走过次数的期望. 走过次数的期望=Σ边被走过次数 ...
- I2C总线信号时序总结
I2C总线信号时序总结 总线空闲状态 I2C总线总线的SDA和SCL两条信号线同时处于高电平时,规定为总线的空闲状态.此时各个器件的输出级场效应管均处在截止状态,即释放总线,由两条信号线各自的上拉电 ...
- Mybatis+struts2+spring整合
把student项目改造成ssm struts2 +mybatis+spring 1,先添加spring支持:类库三个,applicationContext.xml写在webinf下四个命名空间,监 ...
- HDU 5877 Weak Pair（弱点对）
HDU 5877 Weak Pair(弱点对) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K (Jav ...