原生js做的手風琴效果的導航菜單

更新時間：2013年11月08日 09:13:20 作者：

手風琴效果的導航想必大家都有見到過吧，實現(xiàn)的方法也有很多，在本文為大家介紹下使用原生js簡單實現(xiàn)下，感興趣的朋友不要錯過

做好的手風琴效果如下，具體看代碼：

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"; 
} 
} 