Custom jquery accordion plug-in, custom jquery accordion

Custom jquery accordion plug-in, custom jquery accordion

The accordion effect is an effect that is frequently used in projects. The original project has been using easyui. By the end of the year, I tried to write

Css style

/* 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 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 ;}

Custom js

(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/monito R_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 + = '<li> <div class = "titlemenu">  <span> '+ element. title + '</span> </div>'; if (element. submenu! = Null) {li + = '<ul class = "submenu">'; $. each (element. submenu, function (ind, ele) {li + = '<li>  <span> <a href = "#"> '+ ele. title + '</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 ('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

<! Doctype html> 
Display Effect