原生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 事件属性绑定带参数的函数
Mar 13 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
angularJS中router的使用指南
Feb 09 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 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
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
详解Swift中属性的声明与作用
2016/06/30 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python数据结构之图的应用示例
2018/05/11 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python jieba库用法及实例解析
2019/11/04 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
2014村务公开实施方案
2014/02/25 职场文书
产品发布会策划方案
2014/05/12 职场文书
商业街策划方案
2014/05/31 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
营业员岗位职责范本
2015/04/14 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
Redis基本数据类型Set常用操作命令
2022/06/01 Redis