Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<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.tar get ){
If ($ (this). children (). is (': Den den ')){
$ (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(ulw.{'}.css ({
Cursor: 'default ',
'LIST-style-image': 'none'
});
});
</Script>
<Style>
Fieldset {width: 320px}
</Style>
</Head>
<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>
</Html>
The above implementation list is simple, but jQuery provides a function toggle () for switching element states (). You can change the code in the red font to the following code to implement the above functions:
$ (This). children (). toggle ();
Certificate (this).css ('LIST-style-image ',
($ (This). children (). is (': Den den '))?
'Url(plus.gif) ': 'url(minus.gif )');
}
The show (), hide (), and toggle () functions can gradually display and hide elements with parameters.
Hide (speed, callback)
Show (speed, callback)
Toggle (speed, callback)
Speed: You can specify the duration (optional) of the effect as a number of milliseconds or a predefined string: slow, normal, or fast. If omitted, no animation is generated and elements are immediately displayed on the display screen.
Callback: callback function (optional), called when the animation is complete. No parameter is passed to this function, but the function context (this) is set to an animation hidden element.
Foldable list of animation Effects
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<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.tar get ){
Certificate (this).css ('LIST-style-image ',
(! $ (This). children (). is (': Den den '))?
'Url(plus.gif) ': 'url(minus.gif )');
$ (This). children (). toggle ('low ');
}
Return false;
})
. Css ({cursor: 'pointer ',
'LIST-style-image': 'url(plus.gif )'})
. Children (). hide ();
$ ('Li: not (: has(ulw.{'}.css ({
Cursor: 'default ',
'LIST-style-image': 'none'
});
});
</Script>
<Style>
Fieldset {width: 320px}
</Style>
</Head>
<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>
</Html>