JQuery hover method and toggle method User Guide, jquerytoggle

JQuery hover method and toggle method User Guide, jquerytoggle

JQuery provides some methods (such as toggle) to combine the effects of the two events, such as mouseover, mouseout, keyup, and keydown.

1. hover Functions

Hover (over, out) is a method that imitates a hover event (move the mouse over an object and remove it from it. This is a custom method that provides a "Keep in it" status for frequently used tasks.
Parameters:
Over (Function): the Function to be triggered when you move the cursor over an element.
Out (Function): the Function to be triggered by removing the mouse from the element.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Panel h5.head"). hover (function (){
$ (This). next (). show (); // triggered when the cursor is suspended
}, Function (){
$ (This). next (). hide (); // triggered when the mouse leaves
})
})
</Script>

2. toggle Function

Toggle (fn, fn) switches the function to be called each time it is clicked. If a matching element is clicked, the specified first function is triggered. When the same element is clicked again, the specified second function is triggered. The subsequent clicks repeatedly call the two functions. You can use unbind ("click") to delete it.

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Panel h5.head"). toggle (function (){
$ (This). next (). show (); // triggered when you click it for the first time
}, Function (){
$ (This). next (). hide (); // triggered when the second click is clicked.
})
})
</Script>

The toggle () method switches the visible state of the element.
If the selected elements are visible, these elements are hidden. If the selected elements are hidden, these elements are displayed. The toggle () method switches the visible state of the element.
If the selected elements are visible, these elements are hidden. If the selected elements are hidden, these elements are displayed.

Therefore, the above Code can also be written as follows:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ("# Panel h5.head"). toggle (function (){
$ (This). next (). toggle ();
}, Function (){
$ (This). next (). toggle ();
})
})
/* $ (Function (){
$ ("# Panel h5.head"). click (function (){
$ (This). next (). toggle ();
})
})*/
</Script>

You can also add some css styles:

Copy codeThe Code is as follows:
<Style type = "text/css">
. Highlight {background: # FF3300 ;}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ("# Panel h5.head"). toggle (function () {// used with css styles
$ (This). addClass ("highlight ");
$ (This). next (). show ();
}, Function (){
$ (This). removeClass ("highlight ");
$ (This). next (). hide ();
});
})
</Script>

Do you have a new understanding of common hover events and toggle events in jQuery? I hope this article will help you.