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 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...
随机推荐
- Welcome to Apache™ Hadoop®!
What Is Apache Hadoop? Getting Started Download Hadoop Who Uses Hadoop? News 15 October, 2013: relea ...
- [Angular 2] Property Binding
Property Binding is bind property NOT attribute! import {Component, Input, Output, EventEmitter} fro ...
- Hibernate项目里配置环境时，jar包配置不当会对测试结果产生影响。
问题情况: 如下图所示,该图中,显示了一堆错误的jar包.这是导致了Junit4测试通过了,数据库却没反应的原因. 原因: 之所以出现这种情况,eclipse其实已经告诉了我们原因.如下图所示,这些j ...
- Python购物车的实现课程
需求: 1.用户输入工资收入 2.打印商品列表 3.用户选择商品,不断的加入购物车 4.检测用户余额,直接捐款,不足提示余额不足 5.允许主动退出,退出时,打印已购商品列表 重点方法: 打印列表下标的 ...
- _CrtMemBlockHeader
typedef struct _CrtMemBlockHeader{// Pointer to the block allocated just before this one:struct _Crt ...
- uva 10994 - Simple Addition
//组合数学 //计算sum{i从右往左数的第一个非0数字,p<=i<=q}. #include <cstdio> typedef long long ll; ll sum(l ...
- [置顶] chinayaosir近10年来所阅读的世界著名IT书籍-图文并茂
1.人生观(包括做人原则,心理学,投资,销售) 一个人从来到世上,很多东西都是空白, 阅读一些正能量的书籍,把里面的理论用于生活,不断的应用它, 这些观念就会如同软件一样,不断的升级你的大脑, 合理的 ...
- strcpy and memcpy
1. Inconsist length. char a3[2]; char *a = "Itis " strcpy(a3, a); It is wrong. a3 will b ...
- Hadoop-2.7.1集群环境搭建
摘自:http://blog.csdn.net/u014039577/article/details/49813531 由于日志数据量越来越大,数据处理的逻辑越来越复杂,同时还涉及到大量日志需要批处理 ...
- NSNotificationCenter基础知识
NSNotificationCenter基础知识 Notification的工作机制 1.对应用程序中其他地方发生的事件(比如增加一条数据库记录)感兴趣的对象,会向通告中心(Notificatio ...