jquery realizes the display and hiding effect of the left navigation module _jquery

This article illustrates the display and hidden effect of jquery to the left navigation module. Share to everyone for your reference, specific as follows:

1. The effect is as shown in the picture:

2.html Code:

<div class= "Content_left" > <div class= "Global_module News" >  

3.jQuery Code:

/* Module expansion and shutdown///////////////////////
*
1 P> the
previous sibling node of the element, and then use the Slidetoggle () animation method to shrink or expand the element up/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");})
})

> Elements and <ul> elements. When the "<span>" element is clicked, the <ul> element with its peers is
displayed, hidden, or displayed if it is in a hidden state. Therefore, it is necessary to determine whether <ul> elements
are displayed, and then do other operations separately/
$ (function () {
  $ (". M-treeview > Li > Span"). Click (function () {//Note the child selector (>)
    var $ul = $ (this). 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;
  })
}

More interested readers of jquery-related content can view the site topics: "jquery Extended Tips," "jquery common Plug-ins and Usage summary", "jquery drag-and-drop effects and tips summary", "jquery table (table) Operation Tips Summary", " A summary of Ajax usage in jquery, a summary of common classic effects in jquery, a summary of jquery animation and special effects usage, and a summary of jquery selector usage

I hope this article will help you with the jquery program design.