Developing accordion accordion plugins using jquery

First, plug-in effect

Accordion plug-ins commonly used functions have been implemented, including: Accordion menu item Folding spread effect, select the specified menu item, determine whether the menu item is selected, and so on.

The effect is as follows:

　　

Second, the internal HTML element structure of the plugin

1 <!--Accordioon Components -2 <ulclass= "Accordion">3     <LiAccordion-id= "Menu1"class= "Active">Plug-in use</Li>4     <Li>5         <ul>6             <Li><ahref= "javascript:;">tab Plug-in</a></Li>7             <Li><ahref= "javascript:;">Accordion Plugins</a></Li>8         </ul>9     </Li>Ten     <LiAccordion-id= "MENU2">Administrator Management</Li> One     <Li> A         <ul> -             <Li><ahref= "javascript:;">Administrator View</a></Li> -             <Li><ahref= "javascript:;">Administrator add</a></Li> the             <Li><ahref= "javascript:;">Administrator modification</a></Li> -         </ul> -     </Li> -     <LiAccordion-id= "Menu3">User Management</Li> +     <Li> -         <ul> +             <Li><ahref= "javascript:;">User View</a></Li> A             <Li><ahref= "javascript:;">User add</a></Li> at             <Li><ahref= "javascript:;">User modification</a></Li> -         </ul> -     </Li> - </ul> - <!--Accordioon Component END -

Plug-in body is a <ul> list, inside the odd <li> is the menu item title, even <li> is the menu item content, the title <li> when clicked will determine whether it is selected, if not selected, will select the menu item, Open the content panel and close the remaining menu items.

The menu item content is also a <ul> list, each <li> contains a <a> tag, in our example <a> the tag's click event is to add a tab to the Right tab.

Three, style

1 /*Accordion Style*/2 . Accordion{margin:5px;font-size:14px;}3 /*Link Style*/4 . Accordion a{Color:#333333;text-decoration:None;}5 . Accordion A:hover{Color:#c81623;}6 /*Menu Heading Styles*/7 . Accordion. Accordion-title{margin:5px 0;padding:5px;Height:25px;Line-height:25px;background:#dddddd;Border-radius:5px;cursor:Pointer;}8 . Accordion. Accordion-title:hover{Font-weight:Bold;}9 /*menu Panel Style*/Ten . Accordion. Accordion-body{Padding-left:10px;background: White;}

Iv. main function 1, initialize plug-in styles and events

1 /**2 * Initialize Accordion components3 * @param {Object} $accordion4  */5 functionInit ($accordion) {6 $accordion7. Children ("Li:even"). AddClass ("Accordion-title").). End ()8. Children ("Li:odd"). AddClass ("Accordion-body").)9. CSS ("display", "none"). EQ (0)Ten. CSS ("display", "List-item"); One } A  - /** - * Binding Events the * @param {Object} $accordion -  */ - functioninitevents ($accordion) { -$accordion. Delegate (". Accordion-title", "click",function() { +         //add a style to the menu title -$( This). addclass ("active"). Siblings (". Accordion-title"). Removeclass ("Active"); +         //Call Select to select the specified menu ASelect ($accordion, $ ( This). attr ("Accordion-id")); at     }); -}

2. Select the specified menu

1 /**2 * Select the specified menu3 * @param {Object} $accordion4 * @param {Object} Accordionid5  */6 functionSelect ($accordion, Accordionid) {7     //Panel Animation Toggle8$accordion. Children ("li[accordion-id=" + Accordionid + "]"). Next (). Slidedown (' + '). Siblings ('. Accordion-body '). Slideup (' 100 ');9}

3. Determine if the specified menu is selected

1 /**2 * Determines whether the specified menu is selected3 * @param {Object} $accordion4 * @param {Object} Accordionid5  */6 functionisSelected ($accordion, Accordionid) {7     //Judging by whether the menu title has an active style8     return$accordion. Children ("li[accordion-id=" + Accordionid + "]"). Hasclass ("Active");9}

4. Plug-in extension function

1$.fn.accordion =function(options, param) {2     3     //Save Object4     varAccordion = $ ( This);5     6     if(typeofOptions = = ' String ') {7         Switch(options) {8              Case' SELECT ':9                 returnSelect (accordion, param);Ten              Case' IsSelected ': One                 returnisSelected (accordion, param); A         } -     } -      theoptions = Options | | {}; -  -     return  This. each (function() { -         //Initializing Components + init (accordion); -         //Binding Events + initevents (accordion); A     }); at};

Five, source code download

Https://github.com/xuguofeng/jq-ui

Developing accordion accordion plugins using jquery