Jquery accordion special effect plug-in _ jquery

This article mainly introduces the jquery accordion special effect plug-in, which has a very good effect. If you need it, you can refer to the following: the accordion effect is a high-frequency effect in the project, the project has been using easyui all the time. By the end of the year, I tried to write

Css style

The Code is as follows:

/* CSS Document */
Body {
Margin: 0 auto;
Padding: 0 auto;
Font-size: 9pt;
Font-family:,, 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 {
Position: relative;
Left: 40px;
Top: 5px;
Text-decoration: none;
}
. Submenu li span {
Display: inline-block;
Height: 30px;
Padding: 5px 0px;
}
. Hover {
Background-color: #4A5B79;
}

Custom js

The Code is as follows:

(Function ($ ){
Piano = function (){
_ Menu = '[{"title": "level-1 directory", "img": "images/cog.png", "submenu": [{"title": "level-2 directory ", "img": "images/monitor_window_3d.png" },{ "title": "Level 2 directory", "img": "images/monitor_window_3d.png" },{ "title ": "Level 2 directory", "img": "images/monitor_window_3d.png"}]}, {"title": "Level 1 directory", "img": "images/cog.png ", "submenu": [{"title": "Level 2 directory", "img": "images/monitor_window_3d.png" },{ "title": "Level 2 directory", "img ": "images/monitor_window_3d.png" },{ "id": "4", "title": "Level 2 directory", "img": "images/monitor_window_3d.png"}] ';
Return ep = {
Init: function (obj ){
_ Menu = eval ('+ _ menu + ')');
Var li = "";
$. Each (_ menu, function (index, element ){
Li + ='

'+ Element. title +'

';
If (element. submenu! = Null)
{
Li + ='

';
$. Each (element. submenu, function (ind, ele ){
Li + ='
• '+ Ele. title +'
';
});
Li + ='

';
}
Li + ='

';
});
Obj. append (li );
}
}
}
$. Fn. accordion = function (options ){
Var pia = new piano ();
Pia. init ($ (this ));
Return this. each (function (){
Var accs = $ (this). children ('lil ');
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 ('lil'). find ("ul"). each (hide );
$ (This). find ("ul"). slideDown ('normal ');
Return false;
}
Function hide (){
$ (This). slideUp ('normal ');
}
Function reset (){
$ (This). find ("ul"). hide ();
}
}) (JQuery );

Html call Method

The Code is as follows:

Untitled document