Today, I want to talk about toggle in jquery,ArticleSome problems are involved. I hope you can help me solve them.
Today we will focus on a toggle (FN, FN ,....) A function is mainly used to switch the rotation operation of an event.
For example, for a button click event and a div background, click a button once to display the DIV background in blue.
Change the background color to black.
HtmlCodeAs follows:
1:<Body>
2:<Input Type= "Button" ID= "Btnshow" Value= "Toggle"/>
3:<Div ID= "Divtoggle">The ID "divtoggle" is displayed here.</Div>
4:</Body>
The initial style is defined as follows:
1:# Divtoggle {
2:Height: 150px;
3:Width: 200px;
4:Margin: 50px;
5:Background-color:# 6cc;
6:}
In toggle (FN, FN ,....); A toggle () function is used to switch the display status of an element. If an element is displayed, it is hidden after. Toggle () is called.
Jquery code:
1:<SCRIPT type ="Text/JavaScript">
2:$ (
3:Function(){
4:$ ("# Btnshow"). Click (Function(Event){
5:$ ("# Divtoggle"). Toggle ();
6:});
7:}
8:);
9:</SCRIPT>
Click the button to hide the DIV, click the DIV display again, and then loop.
Here, you can manually set the display and hide of elements. display: toggle (true); hide: toggle (false );
We can also set the speed for element hiding and display.
1:$ ("# Divtoggle"). Toggle (600 );
Of course, here we can think of what we often encounter in the web page to move the mouse up to display, and then move the mouse away to hide the effect.
Of course, a hover (fnover, fnout) event is used here. We only need to set fnover and fnout to the above toggle (600;
Here, fnover is an event function that moves the mouse up, And fnout is an event function that moves the mouse away.
We set toggle (600) as a function to call it separately, which seems easier to read.
1:<SCRIPT type ="Text/JavaScript">
2:$ (
3:
4:Function(Event){
5:$ ("# Btnshow"). Hover (overout, overout );
6:FunctionOverout (Event){
7:$ ("# Divtoggle"). Toggle (600 ); 8:}
9:}
10:);
11:</SCRIPT>
In this way, move the mouse over the button and move it away to see the hidden and displayed effects of divtoggle.
To demonstrate toggle (FN, FN ,...) It is a rotation operation. We use the above function, and then add a click event using btnshow to hide the display Div first, and then the DIV style of the table.
You can display the hidden code in this way (in fact, this code is problematic, but writing it in this way can also achieve the desired effect ):
1:<SCRIPT type ="Text/JavaScript">
2:$ (
3:Function(Event){
4:FunctionOverout (Event){
5:$ ("# Divtoggle"). Toggle (600 );
6:}
7:$ ("# Divtoggle"). Toggle (Function(){
8:$ ("# Btnshow"). Click (overout );
9:},Function(){ 10:$ ("# Btnshow"). Click (overout );
11:});
12:}
13:);
14:</SCRIPT>
Looking back, I think this code is very problematic. Toggle (FN, FN ,...) Is used to add a click event to the specified element, and then toggle the element loop.
The functions. Suddenly I felt a little confused. Like a twist. Hope Niu can explain it.
In this way, there is no way to demonstrate the effect of the toggle round robin function. You can click the button to change the DIV style.
The code for changing the DIV style is as follows:
1:<SCRIPT type ="Text/JavaScript">
2:$ (
3:Function(Event){ 4:FunctionOverout (Event){
5:$ ("# Divtoggle"). Toggle (600 );
6:}
7:$ ("# Divtoggle"). Toggle (Function(){
8:$ (This). Click (Function() {$ (This).Css ("Background","Blue");});
9:},Function(Event){ 10:$ (This). Click (Function() {$ (This).Css ("Background","Green");});
11:});
12:}
13:);
14:</SCRIPT>
Here I suddenly thought that to achieve the above effect, we should directly load the event to the button, that is, "btnshow" above, that is, hide the display first, and then change the DIV style. The detailed code is as follows:
1:<SCRIPT type ="Text/JavaScript">
2:$ (
3:Function(Event){ 4:
5:FunctionOverout (Event){
6:$ ("# Divtoggle"). Toggle (600 );
7:}
8:
9:$ ("# Btnshow"). Toggle (
10:Overout, overout,
11:Function() {$ ("# Divtoggle").Css ({"Background":"Green"});}, 12:Function() {$ ("# Divtoggle").Css ({"Background":"Blue"});}
13:);
14:
15:}
16:);
17:</SCRIPT>
In this way, you can hide, display, and change the style.
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
