演示地址：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. linux下mysql的卸载、安装全过程

    卸载mysql 1.查找以前是否装有mysql 命令:rpm -qa|grep -i mysql 可以看到mysql的两个包: mysql-4.1.12-3.RHEL4.1 mysqlclient10 ...

  2. Linux安装配置php

    1.获取安装文件: http://www.php.net/downloads.php  php-5.3.8.tar.gz 获取安装php需要的支持文件:http://download.csdn.net ...

  3. 常用的JS数据类型转换方法

    JS 数据类型转换的方法有以下3种:1)使用转换函数2)强制类型转换3)利用js变量弱类型特性进行转换 1:js提供了parseInt()和parseFloat()这两个转换函数. 这里输入内容par ...

  4. (第二章)Java并发机制的底层实现原理

    一.概述 Java代码在编译后会变成Java字节码,字节码被类加载器加载到JVM里,JVM执行字节码,最终需要转化为汇编指令在CPU上执行,Java中所使用的并发机制依赖于JVM的实现和CPU的指令. ...

  5. 小学生之KTV播放原理

    第一步: 创建一个Song类 //歌曲名称 public  string SongName { get; set; } //歌曲路劲 public string SongPath { get; set ...

  6. C复习手记(Day4)

    1.C错误处理 errno.perror() 和sterror() perror() 函数显示您传给它的字符串,后跟一个冒号.一个空格和当前 errno 值的文本表示形式. strerror() 函数 ...

  7. 关于PagedDataSource，非常好用的一个分页属性！

    Asp.net提供了三个功能强大的列表控件:DataGrid.DataList和Repeater控件,但其中只有DataGrid控件提供分页功能.相对DataGrid,DataList和Repeate ...

  8. boost

    参考博客 http://www.cnblogs.com/lidabo/p/3805487.html http://www.cppblog.com/Robertxiao/archive/2013/01/ ...

  9. 深入剖析C/C++函数的参数传递机制

    2014-07-29 20:16 深入剖析C/C++函数的参数传递机制    C语言的函数入口参数,可以使用值传递和指针传递方式,C++又多了引用(reference)传递方式.引用传递方式在使用上类 ...

  10. WIN8 WIN10系统如何完全获取用户管理员权限

    按住WIN+R 2 计算机配置----Windows设置----安全设置----本地策略----安全选项----用户账户控制:以管理员批准模式运行所有管理员,把启用改为禁止然后重启电脑