原生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 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
js用Date对象的setDate()函数对日期进行加减操作
2014/09/18 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
Node.js实现数据推送
2016/04/14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
用python读写excel的方法
2014/11/18 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python 实现倒排索引的方法
2018/12/25 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
高中数学教师求职信
2013/10/30 职场文书
授权委托书
2014/09/17 职场文书
云冈石窟导游词
2015/02/04 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库