编程 Javascript

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

Posted in Javascript onNovember 08, 2013

做好的手风琴效果如下，具体看代码：
原生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做的手风琴效果的导航菜单

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS Range HTML文档/文字内容选中、库及应用介绍

May 12 Javascript

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)

Dec 27 Javascript

wap手机图片滑动切换特效无css3元素js脚本编写

Jul 28 Javascript

jQuery中的siblings()是什么意思(推荐)

Dec 29 Javascript

微信小程序两种滑动方式（横向滑动，竖向滑动）详细及实例代码

Jan 13 Javascript

详解react-router4 异步加载路由两种方法

Sep 12 Javascript

jQuery实现模糊查询的方法分析

May 10 jQuery

vue通过style或者class改变样式的实例代码

Oct 30 Javascript

使用异步controller与jQuery实现卷帘式分页

Jun 18 jQuery

浅析vue-router中params和query的区别

Dec 24 Javascript

JS实现网页烟花动画效果

Mar 10 Javascript

JS数组降维的实现Array.prototype.concat.apply([], arr)

Apr 28 Javascript

jquery 日期控件datepicker属性详细解析

Nov 08 #Javascript

jquery增加时编辑jqGrid(实例代码)

Nov 08 #Javascript

jqueyr判断checkbox组的选中(示例代码)

Nov 08 #Javascript

iframe子父页面调用js函数示例

Nov 07 #Javascript

Jquery通过Ajax方式来提交Form表单的具体实现

Nov 07 #Javascript

Checbox的操作含已选、未选及判断代码

Nov 07 #Javascript

js操作label给label赋值及取label的值示例

Nov 07 #Javascript