Accordion effect is the use of a higher frequency in the project, the original project has been used Easyui, near the end of the year, try to write a
CSS Styles
Copy Code code as follows:
/* CSS Document * *
Body {
margin:0 Auto;
padding:0 Auto;
font-size:9pt;
Font-family: Microsoft James Black, XXFarEastFont-Franklin, Arial, Helvetica, Verdana, Sans-serif;
}
. accordion {
padding-left:0px;
}
. accordion Li {
border-top:1px solid #000;
List-style-type:none;
}
. titlemenu {
width:100%;
height:30px;
Background-color: #F2F2F2;
padding:5px 0px;
Text-align:left;
Cursor:pointer;
}
. titlemenu img {
position:relative;
left:20px;
top:5px;
}
. Titlemenu span {
Display:inline-block;
position:relative;
left:40px;
}
. submenu {
Text-align:left;
width:100%;
padding-left:0px;
}
. submenu Li {
List-style-type:none;
width:100%;
}
. submenu Li img {
position:relative;
left:20px;
top:5px;
}
. submenu Li a {
position:relative;
left:40px;
top:5px;
Text-decoration:none;
}
. submenu Li Span {
Display:inline-block;
height:30px;
padding:5px 0px;
}
. hover {
Background-color: #4A5B79;
}
Customizing JS
Copy Code code as follows:
(function ($) {
Piano = function () {
_menu = ' [{title ']: "Level directory", "img": "Images/cog.png", "submenu": [{"title": "Level Two Directory", "img": "Images/monitor_window_3d.png" },{"title": "Level Two Directory", "img": "Images/monitor_window_3d.png"},{"title": "Level Two Directory", "img": "Images/monitor_window_3d.png"}] },{"title": "Level Directory", "img": "Images/cog.png", "submenu": [{"title": "Two level Directory", "img": "Images/monitor_window_3d.png"},{" Title ":" Two level directory, "img": "Images/monitor_window_3d.png"},{"id": "4", "title": "Level Two Directory", "img": "Images/monitor_window_ 3d.png "}]}] ';
Return EP = {
Init:function (obj) {
_menu = eval (' (' + _menu + ') ');
var li = "";
$.each (_menu, function (index, Element) {
Li + + ' <li><div class= "Titlemenu" ><span& gt; ' + element.title + ' </span></div> ';
if (element.submenu!=null)
{
li+= ' <ul class= ' submenu ' > ';
$.each (Element.submenu, function (Ind, ele) {
Li + + ' <li><span><a href=" # "> ' + ele.titl E + ' </a></span></li> ';
});
li+= ' </ul> ';
}
li+= ' </li> ';
});
Obj.append (LI);
}
}
}
$.fn.accordion = function (options) {
var pia = new piano ();
Pia.init ($ (this));
Return This.each (function () {
var ACCs = $ (this). Children (' Li ');
Accs.each (reset);
Accs.click (OnClick);
var Menu_li = $ (". submenu"). Children ("Li");
Menu_li.each (function (index, Element) {
$ (this). MouseMove (function (e) {
$ (this). Siblings (). Removeclass ("hover");
$ (this). Find ("a"). CSS ("Color", "#fff");
$ (this). Siblings (). Find ("a"). CSS ("Color", "#000");
$ (this). addclass ("hover");
});
});
});
}
function OnClick () {
$ (this). Siblings (' Li '). Find ("UL"). each (hide);
$ (this). FIND ("ul"). Slidedown (' normal ');
return false;
}
function Hide () {
$ (this). Slideup (' normal ');
}
function Reset () {
$ (this). FIND ("ul"). Hide ();
}
}) (JQuery);
How HTML is called
Copy Code code as follows:
<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<script src= "Jquery-1.8.0.min.js" ></script>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<script src= "Accordion.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ("#accordion"). accordion ();
});
</script>
<body>
<ul id= "accordion" class= "accordion" style= "width:200px;height:500px"; >
</ul>
</body>
Display effects
The above is the entire content of this article, I hope you can enjoy
