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.