javascript实现的手风琴折叠菜单效果
实现效果：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴效果</title>
</head>
<body> <div class="main"> <ul id="expand">
<li>
<h3 class="h3-common">第一类目</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<h3 class="h3-common">第二类目</h3>
<ul>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
<li>
<h3 class="h3-common">第三类目</h3>
<ul>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</li>
<li>
<h3 class="h3-common">第四类目</h3>
<ul>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
</ul>
</li>
</ul> </div> </body>
</html>
CSS代码：
/*
* by @Kevinの快乐时代
*2015/5/21
*/ *{
margin: 0;padding: 0;
} ul,li{
list-style: none;
} .main{
width: 300px;
color:#666;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin:auto;
} .main ul li ul{
display: none;
padding: 15px;
background-color: #ecf0f1;
} #expand li ul li {
padding: 5px 0;
border-bottom: 1px dotted #999;
} .h3-common{
font-size: 15px;
color: #fff;
padding: 5px 22px;
border-bottom: 1px dotted #e7e7e7;
} .main h3{ background: url(http://www.iconfont.cn/uploads/fonts/font-155705-.png?color=ecf0f1&size=20) no-repeat #00bb9c left center;
} .main h3.active{
background: url(http://www.iconfont.cn/uploads/fonts/font-69084-.png?color=ecf0f1&size=20) no-repeat #ea8010 left center;
} .li_active{
background-color: #56abe4;
color: #fff;
text-align: center;
border-radius: 3px;
}
javascript代码：
var oExpand=document.getElementById('expand');
var ah3=oExpand.getElementsByTagName('h3');
var aUl=oExpand.getElementsByTagName('ul');
var aLi=null;
var arrLi=[];
for(var i=0;i<ah3.length;i++){
ah3[i].index=i;
ah3[i].onclick=function(){
var current_num=this.index;//添加自定义索引值
for(var i=0;i<aUl.length;i++){
//没被选中的ul折叠起来
if(ah3[i] != this){
ah3[i].className="h3-common";
aUl[i].style.display="none";
}
}
//展开，收起
if(!ah3[current_num].classList.contains('active')){
ah3[current_num].classList.add('active');
aUl[current_num].style.display='block';
}else{
ah3[current_num].classList.remove('active');
aUl[current_num].style.display='none';
}
}
}
//添加数组
for(var i=0;i<aUl.length;i++){
aLi =aUl[i].getElementsByTagName('li');
for(var j=0;j<aLi.length;j++){
arrLi.push(aLi[j]);
}
}
for(var i=0;i<arrLi.length;i++){
arrLi[i].onclick=function(){
//初始化其他li
for(var i=0;i<arrLi.length;i++){
if(arrLi[i] !=this){
arrLi[i].className='';
}
}
//元素本身的点击选中，再点击消失；.li_active是选中时的状态
if(!this.classList.contains('li_active')){
this.classList.add('li_active');
}else{
this.classList.remove('li_active')
}
}
}
javascript实现的手风琴折叠菜单效果的更多相关文章
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...
- [转] CSS3垂直手风琴折叠菜单
[From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...
- slideToggle+slideup实现手机端折叠菜单效果
折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...
- 基于jQuery制作的手风琴折叠菜单
初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...
- jQuery简单竖排手风琴折叠菜单代码
项目需求1.刚开始只显示,每个标题, 2.让每个 li列表隔行换色 3.当我点击某个标题时,下面的列表会缓慢的展开,其他列表展开的内容会收起 <!DOCTYPE html> <htm ...
- 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...
- 滑动式折叠菜单 － Slashdot's Menu
折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...
- JSON无限折叠菜单
JSON无限折叠菜单编写 2013-12-14 22:37 by 龙恩0707, 103 阅读, 1 评论, 收藏, 编辑 最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所 ...
- JSON无限折叠菜单编写
最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...
随机推荐
- Spring + mybatis整合方案总结 结合实例应用
Spring + mybatis整合实例应用 项目结构图 (Spring3.0.2 +mybatis3.0.4) 方案一: 通过配置文件整合Spring和mybatis 应用数据库 -- --数据库 ...
- 记录一下自己总结出来的,在内网环境下使用maven打包的各种方法,包括各种常用的打包方式（一）
(一)内外网代理仓库搭建 想了一下,先用这个MAVEN安装部署的说明随笔,作为自己的第一篇技术帖,往后会陆陆续续将自己研究的心得发出来,留下脚印.希望有大神可以指点 一 .文章主要解决问题说明 1) ...
- ProtoBuf 的java使用
碰巧用到Proto,算是笔记吧算是笔记吧, windows : 1,两个文件:proto.exe, protobuf-java-2.4.1.jar 2,建立一个工程TestPb,在下面建立一个pro ...
- SplitButton( 分割按钮)
一． 加载方式//class 加载方式<a href="javascript:void(0)" id="edit" class="easyui- ...
- C#。2. 2 语句
二.语句: 顺序,分支,循环. (一)顺序:略 分支:判断--表达式. if(){} 四大类: 1.if if (age > 18) { Console.WriteLin ...
- HTML5画布（变形）
坐标变换 案例1: <!DOCTYPE html><html><head lang="en"> <meta charset="U ...
- memcache运维整理
memcache运维总结 第一部分:memcache安装 1.安装libevent 2.安装memcache 3.安装php的memcache扩展 4.测试 第二部分:memcache客户端操作 1. ...
- Flask学习记录之Flask-Mail
Flask-Mail可以连接到配置中的SMTP服务器,进行邮件发送,如果没有进行SMTP服务器的配置,将会默认连接到localhost上的 一.配置及初始化 (1)flask应用配置 #配置选项 MA ...
- Android 网络通信框架Volley的简单使用
Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健壮. Volley提供的功能: JSON,图像等的异步下载: 网络请求的排序(scheduling) 网络请求的优先级处理 ...
- Codeforces 13C Sequence
http://codeforces.com/contest/13/problem/C 题目大意 给定一个含有N个数的序列,要求你对一些数减掉或者加上某个值,使得序列变为非递减的,问你加减的值的总和最少 ...