The effect of the toggle () method is to toggle the visible state of the element, that is, if the element is visible, toggle to hidden, and if the element is hidden, toggle to visible.
Example:
$ (function () {
$ ("#content"). Toggle ();
})
<p id= "content" style= "Display:none" > It turns out to be invisible </p>
When there is a click event, another area can be seen in the state switch to write:
$ (document). Ready (function () {
$ ("#test"). Click (
function () {
$ ("#content"). Toggle ();
}
);
});
<p id= "test" ><input type= "button" value= "click here"/></p>
<p id= "Content" style= "Display:none" > When clicked on "Click here" above, the contents will be hidden and displayed between the switch </p>
Let's say the use of the Toggle (FN,FN) method, the effect is to call the function after each click, and if a matching element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered, and if there are more functions, it is triggered again until the last one. Successive calls to these functions are repeated for each subsequent click. Note that there is already a click to trigger the function to invoke the function, do not need another. Click (FN), I started to operate this function when I made a mistake.
Example:
$ (document). Ready (function () {
$ ("#test"). Toggle (function () {
$ ("#content"). Hide (' slow ');
},function () {
$ ("#content"). Show (' fast ');
});
});
<p id= "test" ><input type= "button" value= "click here"/></p>
<p id= "Content" style= "Display:none" > When clicked on "Click here" above, the contents will be hidden and displayed between the switch </p