Share my jquery implementation drop-down menu. _ jquery-js tutorial

The jquery Library brings us a lot of convenience. It is easy to use jquery to implement a simple drop-down menu, but there are also different implementation methods. Today, I wrote a drop-down menu using jquery, referring to SexyDropDownMenu2010 of XiaofengWang. Some of the items are worth recording. Abstract:

The jquery Library brings us a lot of convenience. It is easy to use jquery to implement a simple drop-down menu, but there are also different implementation methods. Today, I wrote a drop-down menu using jquery, referring to SexyDropDownMenu2010 of Xiaofeng Wang. Some of the items are worth recording.

Implementation:

First, let's talk about his code (It's too long to paste all the Code ),

　　I. ul list in html

 
 
 
      
  
  
Home
      
  
  
Tutorials 
   
 
    
Ch1
 
    
Ch2 
     
 
      
Ch21 
       
 
        
Ch211 
         
 
          
Ch2111 
           
 
            
Ch21111
 
            
Ch21112
 
            
Ch21113
 
            
Ch21114
 
            
Ch21115
 
            
Ch21116
 
           
 
 
          
Ch2112
 
          
Ch2113
 
          
Ch2114
 
          
Ch2115
 
         
 
 
        
Ch212
 
        
Ch213
 
        
Ch214
 
       
 
 
      
Ch22 
       
 
        
Ch221
 
        
Ch222
 
        
Ch223
 
       
 
 
      
Ch23
 
     
 
 
    
Ch3 
     
 
      
Ch31
 
      
Ch32
 
     
 
 
   
 
      
  
  
Resources 
   
 
    
Sub Nav Link
 
    
Sub Nav Link
 
   
 
      
  
  
About Us
      
  
  
Advertise
      
  
  
Submit
      
  
  
Contact Us
    
 
 

There is a menu structure with six layers of depth, such

　　Ii. js part (css will not be posted)

$ (Document ). ready (function () {// Part 1 // Top Menu // Only shows drop down trigger when js is enabled (Adds empty span tag after ul. submenu1 *) $ ("ul. submenu1 "). parent (). append (""); // The second part $ ("ul. topmenu li span "). click (function () {// When trigger is clicked... // Following events are applied to the submenu1 itself (moving submenu1 up and down) // Drop down the submenu1 on click $ (this ). parent (). find ("ul. submenu1 "). slideDown ('fast '). show (); // after clicking it, bind the hover handler to it. It seems like a clever place $ (this ). parent (). hover (function () {}, function () {// When the mouse hovers out of the submenu1, move it back up $ (this ). parent (). find ("ul. submenu1 "). slideUp ('low');}); // Following events are applied to the trigger (Hover events for the trigger )}). hover (function () {// On hover over, add class "hover" $ (this ). addClass ("hover") ;}, function () {// On Hover Out // On hover out, remove class "hover" $ (this ). removeClass ("hover") ;}; // Part 3 $ ("ul. topmenu li ul. submenu1 li "). hover (function () {$ (this ). find ("ul. submenu11: first "). show ("slow") ;}, function () {$ (this ). find ("ul. submenu11: first "). hide ("fast ");});});

Part 1:

Added a trigger button for the menu.

Part 2:

A processing function bound to a click event

After the trigger button is clicked, the hover processing function is bound to the li at the outermost layer of the drop-down menu.

Bind the hover function to the outermost li layer. Here, the processing function writes no processing when the mouse is hovering over li (the first function is blank), and li collapse when the mouse leaves.

In this way, the ul menu is displayed in the li at the outermost layer, so that the menu will not be automatically collapsed, that is, when the mouse leaves the entire menu, li will automatically collapse.

Part 3:

Binds the ul hover event nested in the menu to expand and collapse the next menu.

$ (This ). find ("ul. submenu11: first) is also a clever way to use find to obtain the descendant of each element in the current matched element set, and use "ul. submenu11: first "is used to filter the next generation elements of an activity.

At the same time, a collapsed processing function is bound to the next menu, Which is used together with the collapsed function bound to the outermost li in the trigger menu. This function is used to automatically collapse the menu.

Summary:

It shows the strength and flexibility of jquery filters and the elegant chain Syntax of jquery.

The following is a simple implementation of the jQuery horizontal drop-down menu.

     JQuery horizontal drop-down menu implementation