Example code for jquery to implement dynamic menu_jquery

The way jquery implements dynamic menus is similar to the way jquery pop-up windows use JavaScript to operate css.

The specific steps can be divided into the following steps:

•Create an html page containing the menu to be expressed

Copy the code The code is as follows:

                                                                                                                                                             I am submenu 2
 
 

  I am menu 2< ;/a>
                            
•                                                         id="content">

•Create a css file to control the display of the menu



Copy code

The code is as follows:/*To make all li do not display small dots, you can use css tag selector*/li{ /*Make the small dot in front of the list disappear*/ list-style: none;

/*Indent effect*/

margin- left: 18px;
/*Hide menu*/
display: none;
}
a{
/*How text is displayed*/
text-decoration: none;
}


•Create a JavaScript file to control the display of the menu

Copy the code

The code is as follows :/* * Click the main menu and the submenu will be displayed; click the main menu again and the submenu will be hidden * Need to write code to add an onclick event to the main menu when loading. Allows clicking the main menu to display the submenu * Method executed when the registration page is loaded

*/

$(document).ready(function(){
//var uls = $("ul ");
//Find the a node under ul
var as = $("ul > a");
as.click(function(){
//First find the current ul li in , and then let li display
//Get the currently clicked ul node
var aNode = $(this);
//Find all li nodes under the clicked ul node
var lis = aNode.nextAll("li");
//Show or hide the li child nodes of ul
lis.toggle("slow");
});
});