Home > Developer > JavaScript
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.
The HTML code we define is as follows:
<Body>
<Input type = "button" id = "btnShow" value = "Toggle"/>
<Div id = "DivToggle"> the content of id "DivToggle" is displayed here </div>
</Body>
The initial style is defined as follows:
Copy codeThe Code is as follows:
# DivToggle {
Height: 150px;
Width: 200px;
Margin: 50px;
Background-color: # 6CC;
}
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:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (
Function (){
$ ("# BtnShow"). click (function (event ){
$ ("# DivToggle"). toggle ();
});
}
);
</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.
$ ("# 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.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (
Function (event ){
$ ("# BtnShow"). hover (OverOut, OverOut );
Function OverOut (event ){
$ ("# DivToggle"). toggle (600 );
}
}
);
</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 ):
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (
Function (event ){
Function OverOut (event ){
$ ("# DivToggle"). toggle (600 );
}
$ ("# DivToggle"). toggle (function (){
$ ("# BtnShow"). click (OverOut );
}, Function (){
$ ("# BtnShow"). click (OverOut );
});
}
);
</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:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (
Function (event ){
Function OverOut (event ){
$ ("# DivToggle"). toggle (600 );
}
$ ("# DivToggle"). toggle (function (){
$ (This). click (function () {detail (thisground .css ("background", "Blue ");});
}, Function (event ){
$ (This). click (function () {detail (thisground .css ("background", "Green ");});
});
}
);
</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:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (
Function (event ){
Function OverOut (event ){
$ ("# DivToggle"). toggle (600 );
}
$ ("# BtnShow"). toggle (
OverOut, OverOut,
Function () {$ ("# DivToggle" ).css ({"background": "Green "});},
Function () {$ ("# DivToggle" ).css ({"background": "Blue "});}
);
}
);
</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
