In jquery
Both the toggle and slidetoggle methods can display and hide an element. Powerful ~
The difference is:
Toggle: the dynamic effect is from right to left. Horizontal action.
Slidetoggle: the dynamic effect goes from bottom to top. Vertical action.
So, for example, if you want to achieve the dynamic effect of a tree from bottom to top, you can use slidetoggle to get it done.
In addition, toggle and slidetoggle have some parameters that can be set. For details, refer to the jquery API ~
Toggle usage:
<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </SCRIPT>
<Script language = "JavaScript">
$ (Function (){
$ ("# Z"). Toggle (
Function (){
Alert (1 );
},
Function (){
Alert (2 );
},
Function (){
Alert (3 );
}
);
$ ("# X"). Click (function (){
$ ("# Z"). Toggle (
Function (){
Alert (1 );
},
Function (){
Alert (2 );
},
Function (){
Alert (3 );
}
);
});
})
</SCRIPT>
<Div style = "width: 100px; Height: 100px; Background-color: red;" id = "Z"> </div>
<Div style = "width: 100px; Height: 100px; Background-color: Blue;" id = "X"> </div>
Slidetoggle usage:
<Title> </title>
<SCRIPT src = "jquery-1.9.1.js" type = "text/JavaScript"> </SCRIPT>
<Style type = "text/CSS">
. Imgclass
{
Width: 300px;
Height: 300px;
Border: solid 1px red;
}
</Style>
<SCRIPT type = "text/JavaScript">
$ (Function (){
$ ('# Button1'). BIND ('click', function (){
$ ('Img '). slideup (2000 );
});
$ ('# Button2'). BIND ('click', function (){
$ ('Img '). slidedown (2000 );
});
$ ('# Button3'). BIND ('click', function (){
$ ('Img '). slidetoggle (2000 );
})
})
</SCRIPT>
</Head>
<Body>
<Div>
<Div>
<Input id = "button1" type = "button" value = "上"/> <input id = "button2" type = "button"
Value = "drop-down"/> <input id = "button3" type = "button" value = "auto pull up/down"/> </div>
<Div>
</div>
</Div>
</Body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
