原生js做的手风琴效果的导航菜单

更新时间：2013年11月08日 09:13:20 作者：

手风琴效果的导航想必大家都有见到过吧，实现的方法也有很多，在本文为大家介绍下使用原生js简单实现下，感兴趣的朋友不要错过

做好的手风琴效果如下，具体看代码：

html代码

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Accordion</title> 
<style> 
#accordion{ 
width:200px; 
} 
#accordion ul{ 
list-style: none; 
display:none; 
} 
.first-level{ 
background-color: #d8d8d8; 
background-color: rgba(236, 208, 208, 0.53); 
border-radius: 4px; 
display: block; 
cursor: pointer; 
position: relative; 
margin: 2px 0 0 0; 
padding: 8px; 
min-height: 0; 
} 
</style> 
</head> 
<body> 
<div id="accordion"> 
<div> 
<h3 class="first-level">level one</h3> 
<ul> 
<li>first item</li> 
<li>second item</li> 
<li>third item</li> 
</ul> 
</div> 
<div> 
<h3 class="first-level">level one</h3> 
<ul> 
<li>first item</li> 
<li>second item</li> 
<li>third item</li> 
</ul> 
</div> 
<div> 
<h3 class="first-level">level one</h3> 
<ul> 
<li>first item</li> 
<li>second item</li> 
<li>third item</li> 
</ul> 
</div> 
</div> 
<script src="common.js"></script> 
<script> 
var heads = document.querySelectorAll(".first-level"); 
function headClick(event){ 
var target = EventUtil.getTarget(event); 
toggleDisplay(target.parentNode.querySelector("ul")); 
} 
for(var i=0;i<heads.length;i++){ 
EventUtil.addHandler(heads[i], "click", headClick); 
} 

window.onunload = function (){ 
for(var i=0;i<heads.length;i++){ 
EventUtil.removeHandler(heads[i], "click", headClick); 
} 
heads = null; 
} 

common.js文件

复制代码代码如下:

 
var EventUtil = { 
addHandler : function (element, type, handler) { 
if (element.addEventListener) { 
element.addEventListener(type, handler, false); 
} else if (element.attachEvent) { 
element.attachEvent("on" + type, handler); 
} else { 
element["on" + type] = handler; 
} 
}, 
removeHandler : function (element, type, handler) { 
if (element.removeEventListener) { 
element.removeEventListener(type, handler, false); 
} else if (element.detachEvent) { 
element.detachEvent("on" + type, handler); 
} else { 
element["on" + type] = null; 
} 
}, 
getEvent : function (event) { 
return event || window.event; 
}, 
getTarget : function (event) { 
return event.target || event.srcElement; 
} 
} 


var getStyle = function (el, style) { 
if (el.currentStyle) { 
style = style.replace(/\-(\w)/g, function (all, letter) { 
return letter.toUpperCase(); 
}); 
var value = el.currentStyle[style]; 
return value; 
} else { 
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style); 
} 
} 


var toggleDisplay = function (element) { 
var display = getStyle(element, "display"); 
if (display == "none") { 
element.style.display = "block"; 
} else { 
element.style.display = "none"; 
} 
} 

您可能感兴趣的文章:

js实现移动端吸顶效果
这篇文章主要为大家详细介绍了js实现移动端吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
基于BootStrap实现局部刷新分页实例代码
这篇文章主要介绍了基于BootStrap实现局部刷新的分页的相关资料,非常不错，代码简单易懂，具有参考价值，需要的朋友可以参考下
2016-08-08
js和jquery分别验证单选框、复选框、下拉框
这篇文章主要为大家详细介绍了js和jquery分别验证单选框、复选框、下拉框的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12
javascript(js) join函数使用方法介绍
javascript(js) join函数使用方法介绍...
2007-11-11
修改file按钮的默认样式实现代码
file按钮作为上传文件使用，不过默认的样式确实让人不敢恭维啊，如何才可以修改为漂亮一点的呢？接下来与大家分享下具体的实现代码，感兴趣的朋友可以参考下哈
2013-04-04
javascript实现数组中的内容随机输出
本文实例讲述了javaScript数组随机排列实现随机洗牌功能的方法。分享给大家供大家参考。
2015-08-08
js定义类的几种方法(推荐)
下面小编就为大家带来一篇js定义类的几种方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
js+html5实现canvas绘制椭圆形图案的方法
这篇文章主要介绍了js+html5实现canvas绘制椭圆形图案的方法,涉及html5图形绘制的基础技巧,感兴趣的朋友可以参考一下
2016-05-05
深入理解JS继承和原型链的问题
js原型链与继承是js中的重点,原型的实现则是在原型链的基础上，本篇文章深入理解JS继承和原型链的问题，有兴趣的同学可以了解一下。
2016-12-12
JavaScript实现创建自定义对象的常用方式总结
这篇文章主要介绍了JavaScript实现创建自定义对象的常用方式,结合实例形式总结分析了JavaScript工厂模式、构造函数模式、原型模式、组合模式等常用的自定义对象创建模式操作与使用技巧,需要的朋友可以参考下
2018-07-07