原生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 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JavaScript中import用法总结
Jan 20 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
js实现简单进度条效果
Mar 25 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
原生js获取left值和top值的三种方法
2017/08/02 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python实现校园网自动登录的示例讲解
2018/04/22 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
高一英语教学反思
2014/01/22 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
大学生就业意向书范文
2014/04/01 职场文书
小学数学课后反思
2014/04/23 职场文书
企业口号大全
2014/06/12 职场文书
啦啦队口号大全
2014/06/16 职场文书
小学生读书活动总结
2014/06/30 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript