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 3499910bf9dac5ae3c52d5ede7383485 link returns false, the default URL jump behavior of the link can be prevented.

Return value

The return value of the toggle() function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

c393594a10b4f9bef6c4b9f61373bc5e

The following is the jQuery sample code related to the toggle() event function to demonstrate the specific usage of the toggle() event function:

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
//循环切换执行...

The above is the detailed content of Detailed explanation of jQuery.toggle() event function. For more information, please follow other related articles on the PHP Chinese website!