The toggle() method can be used to switch the hide() and show() methods of the selected element, thereby controlling the display and hiding of the element. The syntax is "$(selector).toggle(speed,callback)"; also Can be used to bind two or more event handler functions to respond to the click event of the selected element in turn. The syntax "$(selector).toggle(function1(), function2(), functionN(),...) ".
The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.
In jquery, the toggle() method has several functions:
Control the display and hiding of elements
Binding Define two or more click event handler functions
toggle() method can be used to switch the hide() and show() methods of the selected element
This method checks the visible status of the selected element. If an element is hidden, show() is run, if an element is visible, hide() is run - this creates a toggle effect.
$(selector).toggle(speed,callback)
| Parameters | Description |
|---|---|
| speed | Optional. Specifies the speed of hide/show effects. The default is "0". Possible values:
|
| callback | Optional. Function executed when the toggle() method completes. |
#Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>
toggle() method can also be used to switch between custom functions
toggle() method can be used for binding Two or more event handler functions to respond to click events of selected elements in turn.
When the specified element is clicked, alternate between two or more functions.
If more than two functions are specified, the toggle() method will toggle all functions. For example, if there are three functions, the first click will call the first function, the second click will call the second function, and the third click will call the third function. The fourth click calls the first function again, and so on.
Syntax:
$(selector).toggle(function1(),function2(),functionN(),...)
| Parameters | Description |
|---|---|
| function1() | Required. Specifies a function to run when the element is clicked every even number of times. |
| function2() | Required. Specifies a function to be run every odd number of times the element is clicked. |
| functionN(),... | Optional. Specify other functions that need to be switched. |
Example:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").toggle(function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");},
function(){
$("body").css("background-color","pink");}
);
});
</script>
</head>
<body>
<button>请点击这里，来切换不同的背景颜色</button>
</body>
</html>[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of What is the use of jquery's toggle() method?. For more information, please follow other related articles on the PHP Chinese website!
%20method? "167489084667130What is the use of jquerys toggle() method?")
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
