JQuery achieves the display and hiding effects of the left-side navigation module.

JQuery achieves the display and hiding effects of the left-side navigation module.

This article describes how jQuery can display and hide the left navigation module. We will share this with you for your reference. The details are as follows:

1. Effect:

2.html code:

<Div class = "content_left"> <div class = "global_module news"> 
3. jQuery code:
/* Expand and close the module * // * 1. in the structure, a node on the <p> element containing the  label needs to be hidden. You can use $ (". module_up_down "). the prev () method is used to obtain the last peer node of the <p> element, and then the slideToggle () animation method is used to make the element shrink up or expand down */$ (function () {$ (". module_up_down "). toggle (function () {var $ self = $ (this); $ self. prev (). slideToggle (600, function () {$ ("img", $ self ). attr ("src", "images/up.gif") ;}, function () {var $ self =$ (this); $ self. prev (). slideToggle (600, function () {$ ("img", $ self ). attr ("src", "images/down.gif ");});})})
/* Expand and close the product tree * // * 1. the <ul> element of the class "m-treeview" has three sub-<li> elements, each sub-<li> element contains the <span> element and <ul> element. When you click the <span> element, the <ul> element of its peers is hidden if it is in the display state. If it is in the hidden state, it is displayed. Therefore, you must first determine whether the <ul> element is displayed, and then perform other operations */$ (function () {$ (". m-treeview> li> span "). click (function () {// note that the sub-selector (>) var $ ul = $ (this) is used ). siblings ("ul"); if ($ ul. is (": visible") {$ (this ). parent (). attr ("class", "m-collapsed"); $ ul. hide ();} else {$ (this ). parent (). attr ("class", "m-expanded"); $ ul. show () ;}return false ;})})