Home > Article > Web Front-end > What does toggle mean in jquery
Toggle in jquery means "switch". The toggle method can switch between hide() and show() methods on the element; this method will check the visible state of the element and run if the element is hidden. show(), if the element is visible, run hide(), the syntax is "element object.toggle()".
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
The English translation of toggle is switching, conversion, which refers to switching between two states.
The toggle() method is used to bind two or more event handler functions to respond to the click event of the selected element in turn.
The toggle() method switches between hide() and show() on 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.
Note: Hidden elements will not be fully displayed (no longer affect the layout of the page).
Tip: This method can be used to switch between custom functions.
Syntax
$(selector).toggle(speed,easing,callback)
speed Optional. Specifies the speed of hiding/showing effects.
Possible values:
Milliseconds
"slow"
"fast"
easing Optional. Specifies the element's speed at different points in the animation. The default value is "swing".
Possible values:
"swing" - move slower at the beginning/end, faster in the middle
"linear" - move at a constant speed
Tip: More available easing functions are provided in the extension plug-in.
callback Optional. The function to be executed after the toggle() method is executed.
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换 hide() 和 show()</button>
</body>
</html>Output result:
Related video tutorial recommendations:jQuery video tutorial
The above is the detailed content of What does toggle mean in jquery. For more information, please follow other related articles on the PHP Chinese website!