Do the accordion effect as follows, specific look at the code:
HTML code
Copy Code code as follows:
<!doctype html>
<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>
<body>
<div id= "Accordion" >
<div>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
<div>
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
<div>
<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;iEventutil.addhandler (Heads[i], "click", Headclick);
}
Window.onunload = function () {
for (Var i=0;iEventutil.removehandler (Heads[i], "click", Headclick);
}
Heads = NULL;
}
Common.js file
Copy Code code as follows:
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";
}
}
