演示地址：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进程实时监控 - htop

    htop 是一个 Linux 下的交互式的进程浏览器,top的增强版 htop:                        进入:htop        退出:按q键 常用操作:          ...

  2. Android Fragment详解(二)：Fragment创建及其生命周期

    Fragments的生命周期 每一个fragments 都有自己的一套生命周期回调方法和处理自己的用户输入事件. 对应生命周期可参考下图: 创建片元(Creating a Fragment) To c ...

  3. StringBuffer和StringBuilder使用方法比較

    StringBuffer是字符串缓冲区,是一个容器. 特点: 1,长度是可变化的. 2,能够字节操作多个数据类型. 3,终于会通过toString方法变成字符串. C create U update ...

  4. C++11: final与override

    C++11中增加了final与override关键字,貌似是从Java语言中借鉴而来,用途也一样.看例子代码: 01.#include <iostream> 02.  03.using n ...

  5. c++ 连接两个字符串实现代码 实现类似strcat功能(转)

    想实现strcat功能,直接网上找一个. 第一种: #include "stdafx.h" #include<iostream> using namespace std ...

  6. 内部类之.this&&.new

    一..this 我们都知道this是指当前类中的对象本身,但是在内部类中需要指明外部类时,this不再起作用,那应该怎么做呢?下面,让我们看看: public class DotThis { void ...

  7. django: db howto - 2

    继 django: db howto - 1 : 一 操作数据库的三种方式: [root@bogon csvt03]# python2.7 manage.py shell Python 2.7.5 ( ...

  8. WPF DataGrid 之数据绑定

    1. Auto generation of columns 最简单的方法莫过于让DataGrid根据数据源中的字段自动生成列了: 根据实体类的公共属性, 能够自动生成四种类型的数据列,对应关系如下: ...

  9. $http post传值的问题

    var app = angular.module("myApp", [], function ($httpProvider) { $httpProvider.defaults.he ...

  10. 2015版Force Touch Mac Book激活三个手指拖动窗口

    新买的2015版的Mac Book Pro,一切都好,就是原来一直很的很习惯的三个手指拖动窗口的手势,突然找不到地方设置了,很是让我失望了一把,在想苹果怎么会把这么有用的手势去掉了呢.还好有万能的Go ...