What does toggle mean in jquery-Front-end Q&A-php.cn

What does toggle mean in jquery

WBOY

Release： 2022-04-15 15:38:55

Original

9930 people have browsed it

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()".

What does toggle mean in jquery

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

What does toggle mean in jquery

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)

Copy after login

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>

Copy after login

Output result:

What does toggle mean in jquery

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!