javascript实现的手风琴折叠菜单效果

时间：2022-09-11 17:27:14

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

实现效果：

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

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

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

  2. &lbrack;转&rsqb; CSS3垂直手风琴折叠菜单

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

  3. slideToggle&plus;slideup实现手机端折叠菜单效果

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

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

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

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

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

  6. 原生Js&lowbar;实现简单的下拉折叠菜单&lpar;添加弹出动画效果&rpar;

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

  7. 滑动式折叠菜单 － Slashdot&&num;39&semi;s Menu

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

  8. JSON无限折叠菜单

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

  9. JSON无限折叠菜单编写

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

随机推荐

  1. Spring Boot入门&equals;&equals;&equals;Hello World

    昨天无意间看到Spring Boot ,今天又了解了一下,试着写一个Hello World!  今天看了半天,最后还是要用Maven最方便!以下: 一.工具 JDK1.7 Eclipse Maven ...

  2. 团队交流合作简单解决方案：TeamViewer远程控制&amp&semi;会议演示 &plus; HyperCam屏幕录制（免费）

    一. 教程摘要 做开发,团队合作是少不了的.而在合作中,有一部分是花在交流讨论上,其中包括初期的任务分配,成员的进度汇报,以及资源和心得分享等.该教程介绍了两个免费的软件,搭配起来,适合人数不超过25 ...

  3. Nginx重定向&lbrack;Rewrite&rsqb;配置 for wordpress &amp&semi; Discuz

    首先Apache的Rewite规则差别不是很大,但是Nginx的Rewrite规则比Apache的简单灵活多了Nginx可以用if进行条件匹配,语法规则类似Cif ($http_user_agent ...

  4. Delphi EurekaLog 调试内存泄露方法

    要使用EurekaLog进行内存泄露检测,需要手动开启"EurekaLog Options..."下的"Advanced Options"旁的"Mem ...

  5. Chromium

    Chromium多进程架构 多进程架构 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//Start_Here_Bac ...

  6. 打不开BT&comma;一直重复的关闭开启。

    /bt-btif (25335): ...preload_wait_timeout (retried:0/max-retry:1)...D/bt_userial(25335): RX terminat ...

  7. Java读书推荐

    想要深入掌握一门技术,读书是必不可少的一步,也是最重要的一步.有些书需要读很多遍才能深入理解,经过几本甚至几十本书的熏陶,才能让你在这个行业中越走越远,爱上这个行业,抽出时间多读本书吧,读书会让人如虎 ...

  8. c&plus;&plus;入门之初话结构体

    结构体是一种具有一定数据结构思想的数据类型,我们在对待结构体的时候,用该从数据结构的思想去审视结构体.下面给出结构体的定义 struct mystruct {]; int score; double ...

  9. BZOJ2815 拓扑排序 &plus; LCA

    https://www.lydsy.com/JudgeOnline/problem.php?id=2815 作为一个DAG图,结点之间又有这么明显的等级之分,很容易想到的是拓扑排序. 但是不管是正向的 ...

  10. NPOI打印设置

    打印设置主要包括方向设置.缩放.纸张设置.页边距等.NPOI 1.2支持大部分打印属性,能够让你轻松满足客户的打印需要. 方向设置首先是方向设置,Excel支持两种页面方向,即纵向和横向. 在NPOI ...

相关文章