Home  >  Article  >  Web Front-end  >  Detailed explanation of jQuery's very practical event toggle() method

Detailed explanation of jQuery's very practical event toggle() method

黄舟
黄舟Original
2017-06-26 13:32:501456browse

Example

Switch different background colors:

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

Try it yourself

Definition and usage

toggle() method is used for binding Two or more event handlers functions to respond to the click event of the selected element in turn.

This method can also be used to switch the hide() and show() methods of the selected element.

Bind two or more functions to the Toggle event

When the specified element is clicked, switch between two or more functions in turn.

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

Try it yourself

ParametersDescriptionRequired. Specifies a function to run when the element is clicked every even number of times. Required. Specifies a function to be run every odd number of times the element is clicked. Optional. Specify other functions that need to be switched.
function1()
function2()
functionN(),...
Switch Hide() and Show()

Check whether each element is visible.

Run show() if the element is hidden. If the element is visible, the element hide(). This creates a switching effect.

Syntax

$(selector).toggle(speed,callback)

Try it yourself

ParametersDescriptionspeed##callbackOptional. Function executed when the toggle() method completes. Show or hide elements
Optional. Specifies the speed of hide/show effects. The default is "0".

Possible values:

  • milliseconds (e.g. 1500)

  • "slow"

  • "normal"

  • "fast"

To learn more about callback, please visit our Callback function tutorial.

Specifies whether to show or hide only all matching elements.

Syntax

$(selector).toggle(switch)

Try it yourself

ParametersswitchRequired. A Boolean value that specifies whether toggle() should only show or hide all selected elements.
Description

    true - Show the element
  • false - Hide the element

The above is the detailed content of Detailed explanation of jQuery's very practical event 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