Click the drop-down menu of level 2 and click the drop-down menu of jquery.

Source: Internet
Author: User

Click the drop-down menu of level 2 and click the drop-down menu of jquery.

Click the drop-down menu of level 2 implemented by jquery:
The secondary drop-down navigation menu is used by various types of websites, so it is a must-have skill. It must be easy and pleasant for veterans, but it may not be the case for beginners, the following describes the implementation process of clicking the level-2 drop-down menu through code examples.
The Code is as follows:

<! DOCTYPE html> 

The code above implements a simple click-level drop-down menu. The following describes the implementation process.
I. Code comments:
1. $ (document). ready (function () {}). When the document structure is fully loaded, run the code in the function.
2. $ (". box "). click (function () {$ (". menu "). addClass ("dlHover");}), registers the click event handler function for the element whose class attribute value is box. When you click this element, the class is added to the second-level drop-down menu, that is, the level-2 drop-down menu is set to visible.
3. $ (". box"). hover () registers a hover event handler function for the box element, which specifies the function to be executed when the mouse moves in and out.
4. function () {$ (this). addClass ("bg") ;}, when the mouse is suspended, add the bg class.
5. function () {$ (this ). removeClass ("bg"); $ (". menu "). removeClass ("dlHover");}). When the mouse leaves, bg and dlHover class classes are deleted.
Ii. Related reading:
1. For the addClass () function, see the addClass () method section of jQuery.
2. For details about hover events, see the hover Events section of jQuery.
3. For the removeClass () function, see the removeClass () method section of jQuery.

The original address is: Mod = viewthread & tid = 14637.

For more information, see:

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.