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. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
随机推荐
- Struts2的标签库（一）——使用Struts2的标签库
Struts2的标签库(一) --使用Struts2的标签库 1.Struts2的标签库其实就是一个自定义的标签库,所以它也有它的标签处理类和标签库定义文件: 2.和所有自定义标签一样,我们可以找到S ...
- LKDBHelper小细节
1,用LKDBHelper插入数据 如果主键一致 就自动删除之前的插入新的数据: 此为:根据主键保持数据的唯一性. 主键相同自动覆盖,相当于修改.
- 【转载】OLE DB, ADO, ODBC关系与区别
原文:OLE DB, ADO, ODBC关系与区别 OLE DB, ADO, ODBC 一. ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(W ...
- 5.5.3使用terminfo功能标志
当使用terminfo时,需要做的第一件事就是调用函数setupterm来设置终端类型.这将为当前的终端类型初始化一个TERMINAL结构.然后,你就可以查看当前终端的功能标志并使用他们的功能了. # ...
- shell script数组使用函数输出
#!/bin/bash # array variable to function test function testit { local newarray newarray=("$@&qu ...
- Shell脚本———— /dev/null 2>&1详解
1.可以将/dev/null看作"黑洞". 它非常等价于一个只写文件. 所有写入它的内容都会永远丢失. 而尝试从它那儿读取内容则什么也读不到. 然而, /dev/null对命令行和 ...
- HTML <meta> 标签
<meta> 元素可提供有关页面的元信息,元数据总是以名称/值的形式被成对传递的. <meta> 标签位于文档的头部,不包含任何内容. <meta> 标签的属性定义 ...
- JavaWeb学习总结（三）—Servlet
1. 什么是Servlet * Servlet是JavaWeb三大组件之一(Servlet.Filter.Listener) ,Servlet是用来处理客户端请求的动态资源,按照一种约定俗成的称呼习惯 ...
- Python不同电脑之间传输文件实现类似scp功能不输密码
SCP vs SFTP 通过paramiko还可以传输文件,如何通过paramiko在计算机之间传输文件,通过阅读官方文档,发现有如下两种方式: sftp = paramiko.SFTPClient. ...
- js-------》(小效果)实现倒计时及时间对象
js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...