原生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"; 
} 
}
Javascript 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
javascript学习小结之prototype
Dec 03 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 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
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
php 获取客户端的真实ip
2009/11/30 PHP
浅析php单例模式
2014/11/25 PHP
js代码实现微博导航栏
2015/07/30 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
80后职场人的职业生涯规划
2014/03/08 职场文书
五五普法心得体会
2014/09/04 职场文书
创先争优个人总结
2015/03/04 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
Python中字符串对象语法分享
2022/02/24 Python