JQuery creates an excellent accordion folding menu and jquery accordion

JQuery creates an excellent accordion folding menu and jquery accordion

The accordion folding menu created by pulling wind's jQuery has a very good effect! Here is the release version of the previous version, mainly for jquery code improvement

Demo diagram:

Main. js

$ (Function () {var tmp = null, $ title = $ ('. title '), $ con = $ ('. title> ul '); $ title. click (function () {$ (tmp ). children ('ul '). slideUp (). end (). children ('. arrow '). removeClass ('arrow-up'); $ (this ). children ('ul '). slideToggle (). end (). children ('. arrow '). addClass ('row-up'); tmp = this;}); $ con. click (function () {return false; // prevents event bubbles });});

Index.html

<! DOCTYPE html> 
Style.css
/* Globle */ul, li {margin: 0; padding: 0; list-style-type: none ;}a {display: inline-block; width: 100%; height: 31px; text-decoration: none; color: # fff; font-size: 13px;} a: hover {background: # 52718A;}/* sidebar */. sidebar {width: 210px; height: 335px; margin: 50px auto; border-radius: 5px; font: 14px ' '; color: # f4f4f4 ;}. title {width: 95%; line-height: 32px; border-bottom: 1px solid # ccc; background: # 1ABC9C; cursor: pointer ;}. title> span {margin-left: 10px;}/* in-sidebar */. in-sidebar {width: 100%; display: none ;}. in-sidebar> li {width: 100%; height: 32px; background: # 34495E; line-height: 32px; text-align: center; border-bottom: 1px solid # ddd;}/* arrow */. arrow {float: right; display: inline-block; margin-right: 5px; width: 20px; height: 32px; background: url (.. /img/down.png) no-repeat center ;}. arrow-up {background: url (.. /img/up.png) no-repeat center ;}
The above is all the content shared in this article. I hope it will help you learn jQuery.