Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<title>collapsible List-take 1</title>
<link rel= "stylesheet" type= text/css "href=". /common.css ">
<script type= "Text/javascript"
Src= ". /scripts/jquery-1.2.1.js "></script>
<script type= "Text/javascript" >
$ (function () {
$ (' Li:has (UL) ')
. Click (Function (event) {
if (this = = Event.target) {
if ($ (this). Children (). Is (': Hidden ')) {
$ (This)
. css (' list-style-image ', ' url (minus.gif) ')
. Children (). Show ();
}
else {
$ (This)
. css (' list-style-image ', ' url (plus.gif) ')
. Children (). hide ();
}
}
return false;
})
. CSS (' cursor ', ' pointer ')
. Click ();
$ (' Li:not (: Has (UL)) '). CSS ({
Cursor: ' Default ',
' List-style-image ': ' None '
});
});
</script>
<style>
fieldset {width:320px}
</style>
<body>
<fieldset>
<legend>collapsible List-take 1</legend>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
Item 3
<ul>
<li>item 3.1</li>
<li>
Item 3.2
<ul>
<li>item 3.2.1</li>
<li>item 3.2.2</li>
<li>item 3.2.3</li>
</ul>
</li>
<li>item 3.3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>item 4.1</li>
<li>
Item 4.2
<ul>
<li>item 4.2.1</li>
<li>item 4.2.2</li>
</ul>
</li>
</ul>
</li>
<li>item 5</li>
</ul>
</fieldset>
</body>
The collapse of the list above is already simple, but jquery provides a function to toggle the state of an element toggle (). The same can be achieved by changing the code of the red font above to the following code:
$ (this). Children (). Toggle ();
$ (this). CSS (' List-style-image ',
($ (this). Children (). Is (': Hidden '))?
' URL (plus.gif) ': ' url (minus.gif) ');
}
The above three functions show (), Hide (), toggle () can realize the gradual display and hiding of elements with parameters
Hide (Speed,callback)
Show (Speed,callback)
Toggle (Speed,callback)
Speed: Can be a number or string, specifying the duration of the effect (optionally) as either a millisecond or one of the predefined strings: slow, normal, or fast. If omitted, the animation is not generated and the element is immediately displayed on the display.
Callback: callback function (optional), called when the animation completes. There are no parameters passed to this function, but the function context (this) is set to animate the elements that are hidden.
Collapsible list of animation effects
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<title>collapsible List-take 3</title>
<link rel= "stylesheet" type= text/css "href=". /common.css ">
<script type= "Text/javascript"
Src= ". /scripts/jquery-1.2.1.js "></script>
<script type= "Text/javascript" >
$ (function () {
$ (' Li:has (UL) ')
. Click (Function (event) {
if (this = = Event.target) {
$ (this). CSS (' List-style-image ',
(!$ (this). Children (). Is (': Hidden '))?
' URL (plus.gif) ': ' url (minus.gif) ');
$ (this). Children (). Toggle (' slow ');
}
return false;
})
. CSS ({cursor: ' pointer ',
' List-style-image ': ' url (plus.gif) '})
. Children (). hide ();
$ (' Li:not (: Has (UL)) '). CSS ({
Cursor: ' Default ',
' List-style-image ': ' None '
});
});
</script>
<style>
fieldset {width:320px}
</style>
<body>
<fieldset>
<legend>collapsible List-take 3</legend>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>
Item 3
<ul>
<li>item 3.1</li>
<li>
Item 3.2
<ul>
<li>item 3.2.1</li>
<li>item 3.2.2</li>
<li>item 3.2.3</li>
</ul>
</li>
<li>item 3.3</li>
</ul>
</li>
<li>
Item 4
<ul>
<li>item 4.1</li>
<li>
Item 4.2
<ul>
<li>item 4.2.1</li>
<li>item 4.2.2</li>
</ul>
</li>
</ul>
</li>
<li>item 5</li>
</ul>
</fieldset>
</body>
