Of Stack

JQuery implements a scalable cascading menu instance code

  • 2020-03-29 23:59:33
  • OfStack

Doing a cascading menu might be daunting with pure JavaScript code instead of a framework, but with a framework, it's easy, and that's the benefit of a framework, which makes development much more efficient, more reliable, and easier to maintain. The general steps for implementing cascading menus using jQuery are as follows:

The & # 8226; 1. Use < first; Ul> And < Li> Create a cascading menu   


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>itcast.cn the JQuery Example application: 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>
</head>
<body>
    <ul>
        <a href="#" mce_href="#"> I am a menu 1</a>
        <li><a href="#" mce_href="#"> I'm submenu 1</a></li>
        <li><a href="#" mce_href="#"> I'm submenu 2</a></li>
    </ul>
    <ul>
        <a href="#" mce_href="#"> I am a menu 2</a>
        <li><a href="#" mce_href="#"> I'm submenu 3</a></li>
        <li><a href="#" mce_href="#"> I'm submenu 4</a></li>
    </ul>
</body>
</html>

The & # 8226; 2. Write JavaScript code to control the contraction of cascading menus 

//When you need to click the button of the main menu, the corresponding submenu can be displayed, and click the submenu again to hide
//You need to write code to add an onclick event to all the main menus when the page loads
//Ensure that submenus can be shown or hidden when the main menu is clicked
//Method to execute when the registration page loads
$(document).ready(function() {
    //Here you need to find all the main menus first
    //Then register click events for all main menus
    //Find the node in ul
    var as = $("ul > a");
    as.click(function() {
        //You need to find the li in the current ul and have the li display
        //Gets the currently clicked a node
        var aNode = $(this);
        //Find all li sibling byte points of the current a node
        var lis = aNode.nextAll("li");
        //Let child nodes show or hide
        lis.toggle("show");
    });
});

The & # 8226; Create a CSS file to control how the label appears 


li {
    list-style: none; 
    margin-left: 18px; 
    display: none; 
}
a{
  text-decoration: none; 
}

Convenience of jQuery:

1. When looking for the clicked menu, only one $(this) is needed

2. The display and hiding of nodes can be done with only one statement: toggle(), and all nodes can be realized on the array with this function.

3. Find all certain tags under a certain tag: $("ul > A ")

Related articles: