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 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...
随机推荐
- android手机内存大小获取
//获取手机中文件管理器中存储大小 File datadir = Environment.getExternalStorageDirectory(); //获取手机内部的存储大小 File datad ...
- mysql索引简单介绍
索引从本质上来说也是一种表,这样的表存储被列为索引的列项值和指向真正完整记录的指针.索引对用户透明.仅仅被数据库引擎用来加速检索真实记录.有索引的表.insert和update操作会耗费很多其它时间而 ...
- js中this的指向
在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1. ...
- Android-应用的本地化及知识拓展之配置修饰符
步骤很简单,只需要两步: 1.创建带有目标语言的配置修饰符的资源子目录 2.将可选资源放入该目录下,android系统会自动处理后续工作 在这里我们需要讲解一下配置修饰符. 中文的配置修饰符:-zh, ...
- 《第一行代码》学习笔记37－服务Service（4）
一个比较完整的自定义AsyncTask写成如下: class DownloadTask extends AsyncTask<Void, Integer, Boolean> { @Overr ...
- Cordova自定义插件
项目原因需要自定义Cordova插件,下面把实现过程记录以便将来查阅.工程为Eclipse下的Android工程,该工程已经引入Cordova.Cordova版本4.0.2.1.定义插件类OpenAp ...
- HDU 2896 病毒侵袭 （AC自动机）
这题模板题.............但是竟然要去重........调试了半天才发现.................... #include <cstdio> #include <i ...
- 会话控制session,cookie(0521)
简单介绍: 一.什么是session? 1. 定义: Session,在计算机中,尤其是在网络应用中,称为“会话”.在计算机专业术语中,Session是指一个终端用户与交互系统进行通信的时间间隔,通常 ...
- 分享到QQ空间、新浪微博、腾讯微博的代码！(收藏)
QQ空间分享代码如下: <a href="javascript:void(0);" onclick="window.open('http://sns.qzon ...
- HTML&CSS基础学习笔记1.6-html的文本操作标签
文本也许是HTML里最常见的元素了,所以我们有必要对HTML的文本操作标签做下认识. 1. <em>,<i>内的文字呈现为倾斜效果: 2. <strong>,< ...