search

Home >Web Front-end >Front-end Q&A >What is the use of jquery's toggle() method?

What is the use of jquery's toggle() method?

青灯夜游
青灯夜游Original
2023-01-28 15:28:293946browse

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

What is the use of jquery's toggle() method?

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:

  • milliseconds (e.g. 1500)
  • "slow"
  • "normal"
  • "fast "
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>

What is the use of jquerys toggle() method?

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>

What is the use of jquerys toggle() method?

[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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to implement css to only display the bottom line of a rowNext article：How to implement css to only display the bottom line of a row

Related articles

See more