In the project, the left menu is folded and displayed, which is common in the software interface (it would be okay to copy a piece of code on the Internet. It is better to write than me, but to learn, you must have a learning spirit ^ !),
I used. animate () to hide and expand it. The Code is as follows:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style>
<! --
. Left {
Width: 100px;
Height: 500px;
Background: #060;
Float: left;
}
# Butid {
Width: 10px;
Height: 500px;
Background: # C00;
Float: left;
}
. Content {
Width: 500px;
Height: 500px;
Background: #000;
Float: left;
Color: # FFF
}
-->
</Style>
</Head>
<Body>
<Script type = "text/javascript" src = "thirdparty/jquery. js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var I = 1; // sets the status judgment
$ ('# Butid'). click (function (){
If (I = 1 ){
$ ('. Content'). animate ({left:'-= 100px ', width: '600px'}, "slow ");
$ ('. Left'). animate ({width: '0px'}, "slow ");
I = 2;
} Else {
$ ('. Content'). animate ({left: '0px', width: '500px '}, "slow ");
$ ('. Left'). animate ({width: '100px'}, "slow"); // fadeOut ()
I = 1;
}
});
});
</Script>
<Div class = "left"> 123 </div>
<Div id = "butid"> </div>
<Div class = "content"> 123 </div>
</Body>
</Html>
If so, it would be normal to execute in FF, IE7-8, chrome. However, left cannot be hidden in IE6 because DIV is automatically opened when the content width in ie6 is exceeded by default. Therefore, you only need to add overflow: hidden to. left {} to solve the problem ~~
PS: I wrote a function in the morning. the content in left is hidden. When I wrote a blog post, I suddenly figured out this principle and thought it was. animate () has a BUG in IE6.