How to realize the effect of folding menu by jquery

Today, the editor will share with you the relevant knowledge points about how jquery can achieve the effect of folding menu. the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

This is a simple implementation of the folding box effect, the slideToggle () method in the core content jQ library.

The effect picture is as follows:

Css Code:

.con _ ul {padding: 0; margin: 0; overflow: auto;} .con _ ul li {list-style: none; padding: 10px; margin: 0; border-bottom: 1px solid # CCCCCC;} .con _ ul li .title {padding-right: 20px; background-image: url (images/drop_1fcaf417.png); / / default background background-position: 100% 0px; background-repeat: no-repeat } .con _ ul li .title.act {padding-right: 20px; background-image: url (images/top.png); / / expanded background background-position: 100% 0px; background-repeat: no-repeat;} .con {background-color: # F4F4F4; display: none;// content content is hidden by default padding: 5px; margin: 10px 0;}

Html code: using the layout of ul li, I think the code structure is more concise and clear.

Title content Content title content

Javascript Code:

$('.con _ ul li .title') .click (function () {$(this) .toggleClass ('act'); / / get the current click object and switch the act class to achieve the effect of switching the background arrow $(this) .toggleClass () .slideToggle () / get the next sibling of the current click object, switch the folding effect}) above is all the content of the article "how to fold the menu effect in jquery". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.