If you use pure JavaScript code without frames, then a cascading menu might be a daunting thing to do, but with the framework, it's easy, and that's the benefit of the framework, which greatly improves development efficiency and is more reliable and easier to maintain. The general steps to implement cascading menus using jquery are as follows:
·1. First use <ul> and <li> to create a cascading menu
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<title>itcast.cn jquery Application Example: pop-up menu </title>
<link type= "Text/css" rel= "stylesheet" href= "Css/menu.css" mce_href= "Css/menu.css"/>
<mce:script type= "Text/javascript" src= "Jslib/jquery.js" mce_src= "Jslib/jquery.js" ></mce:script>
<mce:script type= "Text/javascript" src= "Jslib/jquerymenu.js" mce_src= "Jslib/jquerymenu.js" ></mce:script >
<body>
<ul>
<a href= "#" mce_href= "#" > I am the menu 1</a>
<li><a href= "#" mce_href= "#" > I am a submenu 1</a></li>
<li><a href= "#" mce_href= "#" > I am a submenu 2</a></li>
</ul>
<ul>
<a href= "#" mce_href= "#" > I am the menu 2</a>
<li><a href= "#" mce_href= "#" > I am a submenu 3</a></li>
<li><a href= "#" mce_href= "#" > I am a submenu 4</a></li>
</ul>
</body>
• 2. Write JavaScript code to control the contraction of cascading menus
Copy Code code as follows:
When you need to click on the Main Menu button, the corresponding submenu can be displayed, click the submenu again to hide
Need to write code to add onclick events to all main menus when the page is loaded
Make sure that the main menu is clicked to Show or hide the submenu
Registering the method to execute when the page is loaded
$ (document). Ready (function () {
Here we need to find all the main menus first
And then give all the main menu to register click events
Find the node in UL
var as = $ ("ul > a");
As.click (function () {
Here you need to find the current UL in the Li, and then let Li show up
Gets the currently clicked a node
var anode = $ (this);
Find all Li sibling byte points for current a node
var lis = anode.nextall ("Li");
Let child nodes show or hide
Lis.toggle ("show");
});
});
• Create CSS files to control the display of labels
Copy Code code as follows:
/* How to make all li do not display dots, you can use the CSS tag Selector * *
Li {
List-style:none; * * Make the small dots in front of Li disappear *
margin-left:18px; /* Let the submenu move to the right for a certain distance, to achieve the indentation effect * *
Display:none; /* Let all submenus be hidden first.
}
a{
Text-decoration:none; /* Let the underline of the link disappear * *
}
jquery brings convenience:
1. When looking for a menu to be clicked, only one $ (this) is required to achieve
2. Node display and hide, only one statement: Toggle () Can, and can also be implemented on the array all nodes have this functionality.
3. Find all the tags under a certain label: $ ("ul > a")
