Example of jQuery hover () method and jQuery toggle () method usage, jquerytoggle

Example of jQuery hover () method and jQuery toggle () method usage, jquerytoggle

The jQuery hover () method and the jQuery toggle () method are two merging events. Similar to the ready () method, they all belong to the jQuery custom method. The following describes the attributes and usage of these two methods.

I. hover () method:The syntax structure is hover (enter, leave ). Used to simulate a cursor hover event. When the cursor moves to the target element, the system triggers the specified 1st functions (enter). When the cursor moves out of this element, the system triggers 2nd functions (leave ). Frontend framework UI sharing

The following is an example code:

. Code

1. $ (Function (){
2. $ ("# Panel h5.head"). hover (function (){
3. $ (This). next (). show ();
4. }, Function (){
5. $ (This). next (). hide ();
6. })
7. })

 

The effect of running the code is the same as that of running the following code. When the cursor slides over the "title" link, the corresponding "content" will be displayed. When the cursor slides out of the "title" link, the corresponding "content" will be hidden.

. Code

1. $ (Function (){
2. $ ("# Panel h5.head"). mouseover (function (){
3. $ (This). next ("div. content"). show ();
4. });
5. $ ("# Panel h5.head"). mouseover (function (){
6. $ (This). next ("div. content"). hide ();
7. })
8. });

 

Note: The CSS contains a pseudo-class selector, for example, ": hover". When the cursor is hovering over an element, it will change the appearance of the element. The pseudo-class selector can be used for any element. However, in IE 6 browser, the pseudo-class selector can only be used for hyperlink elements. For other elements, you can use jQuery's hover () method. Frontend framework UI sharing

The hover () method accurately replaces bind ("mouseenter") and bind ("mouseleave") in jQuery, instead of bind ("mouseover") and bind ("mouseout "). Therefore, to trigger the 2nd functions of the hover () method, trigger ("mouseleave") instead of trigger ("mouseout ").

2. toggle () method:Syntax structure: toggle (fnl, fn2 ,... FnN ). It is used to simulate consecutive Mouse clicking events. When an element is clicked 1st, the specified 1st functions (fn1) are triggered. When the same element is clicked again, the specified 2nd functions (fh2) are triggered. If more functions exist, it is triggered sequentially until the last one. Each subsequent click repeats the loop calls to these functions.

The following jQuery code is used in the previous example to enhance the effect:

. Code

1. $ (Function (){
2. $ ("# Panel h5.head"). toggle (function (){
3. $ (This). next (). show ();
4. }, Function (){
5. $ (This). next (). hide ();
6. })
7. })

 

Using toggle () not only achieves the same effect, but also simplifies the code.

The toggle () method has another role in jQuery: Switching the visible state of an element. If the element is visible, click switch to hide it. If the element is hidden, click switch to hide it. Therefore, the above Code can also be written as follows:

. Code

1. $ (Function (){
2. $ ("# Panel h5.head"). toggle (function (){
3. $ (This). next (). toggle ();
4. }, Function (){
5. $ (This). next (). toggle ();
6. })
7. })

 

To provide a better user experience, you need to click the "title" link to not only display "content", but also highlight "title ". Code: frontend framework UI sharing

. Code

1. $ (Function (){
2. $ ("# Panel h5.head"). toggle (function (){
3. $ (This). addClass ("highlight ");
4. $ (This). next (). show ();
5. }, Function (){
6. $ (This). removeClass ("highlight ");
7. $ (This). next (). hide ();
8. });
9. })

 

After running the Code, if the content is displayed, the title is highlighted. if the content is hidden, the title is not highlighted ".

How to Use toggle in jquery?

Toggle (fn, fn)
Switch the function to be called each time you click.
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.
Return Value
JQuery

Parameters
Fn (Function): the Function to be executed when an odd number of clicks is performed.

Fn (Function): the Function to be executed when an even number of clicks is performed.

Example
Switches a table class.

JQuery code:

$ ("Td"). toggle (
Function (){
$ (This). addClass ("selected ");
},
Function (){
$ (This). removeClass ("selected ");
}
);

Note: toggle is only available when you click it. hover is only an event of moving the mouse in and out. It does not matter if you click it. Two can be used together

How can jquery's toggle method be ineffective?

Delete the comma after the second function.