Detailed explanation of jQuery.toggle() event function

The

toggle() function is used to bind a rotating processing function to the click event of each matching element.

toggle() is a special event function used to bind multiple event processing functions to the click event of the matching element. Each time a click event is triggered, the toggle() function will execute one of the event handlers in turn.

For example, we use toggle("click", A, B, C) to bind three event handling functions A, B, and C to the click event of the element. The first click executes A, the second click executes B, the third click executes C, the fourth click executes A, and the fifth click executes B... (If toggle() is called multiple times, the room is independent).

To delete an event bound via toggle(), use the unbind() function. For example: unbind("click").

The toggle() introduced here is a special click event function. jQueryThere is also a toggle() function with the same name, which is used to switch the display/hide of elements.

This function belongs to the jQuery object (instance).

Syntax

This function was added in jQuery 1.0, but was marked as obsolete starting from 1.8, and was removed starting from 1.9.

jQueryObject.toggle( handler1, handler2 [, handlerN... ] )

Parameters

Parameter Description

handler1 Event processing function specified by Function type 1.

handler2 Event handler function 2 specified by Function type.

handlerN optional/event handler function N specified by Function type, there can be any number.

The event function toggle() will pass in a parameter to the event processing function, which is the Event object representing the current event.

If the return value of the event handling function is false, it means blocking the element's default event behavior and stopping the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented.

function clickHandler1(){
    alert("click-1");
}
function clickHandler2(){
    alert("click-2");
}
function clickHandler3(){
    alert("click-3");
}
function clickHandler4(){
    alert("click-4");
}
$("#btn").toggle( clickHandler1, clickHandler2, clickHandler3, clickHandler4 );
//第1次点击执行clickHandler1
//第2次点击执行clickHandler2
//第3次点击执行clickHandler3
//第4次点击执行clickHandler4
//第5次点击执行clickHandler1
//第6次点击执行clickHandler2
//第7次点击执行clickHandler3
//第8次点击执行clickHandler4
//循环切换执行...