演示地址：http://codepen.io/anon/pen/pJERMq

实现效果：

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实现的手风琴折叠菜单效果的更多相关文章

  1. jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解

    在网页制作中我们常常需要折叠式的菜单,在折叠菜单中,手风琴特效的菜单是非常受欢迎,下面就讲解使用jQuery+HTML+CSS3实现垂直手风琴折叠菜单的方法. jQuery实现垂直手风琴折叠菜单示例代 ...

  2. [转] CSS3垂直手风琴折叠菜单

    [From] http://www.html5tricks.com/css3-ver-accordion-menu.html 之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的.今天 ...

  3. slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等, ...

  4. 基于jQuery制作的手风琴折叠菜单

    初始化为全部隐藏 点第一个,显示第一个所隐藏的内容 当点第二个的时候,第一个的内容隐藏,第二个栏目的内容显示,以此类推 下面是代码部分 <!DOCTYPE html><html la ...

  5. jQuery简单竖排手风琴折叠菜单代码

    项目需求1.刚开始只显示,每个标题, 2.让每个 li列表隔行换色 3.当我点击某个标题时,下面的列表会缓慢的展开,其他列表展开的内容会收起 <!DOCTYPE html> <htm ...

  6. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  7. 滑动式折叠菜单 － Slashdot's Menu

    折叠菜单让你在尽可能小的地方放置尽可能多的内容,同时加大了操作的简便性,因此,深受前台设计师的喜爱.随着大家对动画效果的钟爱,折叠菜单也开始“动”起来了,本文介绍的就是 DimX 制作的滑动式折叠菜单 ...

  8. JSON无限折叠菜单

    JSON无限折叠菜单编写 2013-12-14 22:37 by 龙恩0707, 103 阅读, 1 评论, 收藏, 编辑 最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所 ...

  9. JSON无限折叠菜单编写

    最近看了一篇关于JSON无限折叠菜单的文章 感觉写的不错,也研究了下代码,所以用自己编码方式也做了个demo 其实这样的菜单项在我们网站上或者项目导航菜单项很常见的一种效果,特别是在一些电子商务网上上 ...

随机推荐

  1. 《python源代码剖析》笔记 python中的Dict对象

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie 1.PyDictObject对象 -->  C++ STL中的map是基于RB-tre ...

  2. 最全SpringMVC具体演示样例实战教程

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先.导入SpringMVC须要的jar包. 2.加入Web.xml配置文件里关于SpringMVC的配置 <!--conf ...

  3. Mysql查看连接端口及版本

    C:\Users\Administrator>mysql -uroot -pEnter password: *****Welcome to the MySQL monitor. Commands ...

  4. iOS9新特性之UIStackView

    同iOS以往每个迭代一样,iOS 9带来了很多新特性.UIKit框架每个版本都在改变,而在iOS 9比较特别的是UIStackView,它将从根本上改变开发者在iOS上创建用户界面的方式.本文将带你学 ...

  5. 武汉科技大学ACM ：1005: 零起点学算法101——手机短号

    Problem Description 大家都知道,手机号是一个11位长的数字串,同时,作为学生,还可以申请加入校园网,如果加入成功,你将另外拥有一个短号.假设所有的短号都是是 6+手机号的后5位,比 ...

  6. C/C++中逗号表达式的用法

    代码: #include <cstdio> #include <iostream> using namespace std; int main(){ int t1,t2; t1 ...

  7. Word 2010发布博客文章

    只测试了cnblog 1．新建文件选择word 2010自带的博客文章模板 2．在管理账户中新建一个博客账户,也就是你自己在博客园的账户,博客选其他 3．然后选择下一步,博客的URL在自己的博客设置里 ...

  8. 转自：Tsihang 三层网络设备对于IP报文的分片和重组处理原理

    三层网络设备对于IP报文的分片和重组处理原理 对于网络分片,我一年前就想整理出来,虽然说网络上的资料很多,但是真正掌握精髓的除非真正做过分片程序,不然很难将协议栈整体联系起来理解.这篇文章,包括设计分 ...

  9. js 当前系统时间

    <script language=Javascript> function time(){ //获得显示时间的div t_div = document.getElementById('sh ...

  10. 自定义 select 下拉菜单

    .selectBeautifyMainStyle{ color: #9fa0a0; font-size: 14px; font-family: "alegreya_sansthin" ...