原生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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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
Smarty中的注释和截断功能介绍
2015/04/09 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
package.json文件配置详解
2017/06/15 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
python实现批量监控网站
2016/09/09 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
jupyter notebook 重装教程
2020/04/16 Python
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
linux系统都有哪些运行级别
2016/03/26 面试题
写自荐信的七个技巧
2013/10/15 职场文书
毕业生个人求职的自我评价
2013/10/28 职场文书
项目合作计划书
2014/01/09 职场文书
活动总结模板
2014/05/09 职场文书
临床医学专业求职信
2014/08/08 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
民间个人借款协议书
2014/09/30 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
中秋节主题班会
2015/08/14 职场文书