jQuery implements shrinkable and expandable cascading menu example code_javascript skills

If you use pure JavaScript code without using a framework, then making a cascading menu may be a daunting thing, but with a framework, this thing is very easy. This is the benefit of the framework, extremely Dadi improves development efficiency and is more reliable and easier to maintain. The general steps to use jQuery to implement cascading menus are as follows:

•1. First create a cascading menu using

and
• 
  
  Copy code The code is as follows:
  
  "http://www.w3.org /TR/html4/loose.dtd">
  
  
  
  
  
  
  

  

  

  
  
   

  
     I am menu 1
    
  • I am submenu 1< ;/li>
     
  • I am submenu 2
  
   

  
   

  
     I am menu 2
    
  • I am submenu 3
  
               
  • I am submenu 4< /li>
     

  
  
  
  
  
  •2. Write JavaScript code to control the cascading menu Shrink
  
  Copy code The code is as follows:
  
  //You need to click on the main menu When the button is pressed, the corresponding submenu can be displayed. Clicking the submenu again will hide it
  //You need to write code. When the page is loaded, add onclick events to all main menus
  //Ensure that the main menu can be clicked Show or hide submenus
  //Method executed when the registration page is loaded
  $(document).ready(function() {
  //Here you need to first find all the main menus
  //Then Register click events for all main menus
  // Find the node in ul
  var as = $("ul > a");
  as.click(function() {
  // Here you need to find the li in the current ul, and then display the li
  //Get the currently clicked a node
  var aNode = $(this);
  //Find all the li brothers of the current a node Byte point
  var lis = aNode.nextAll("li");
  //Show or hide child nodes
  lis.toggle("show");
  });
  });
  
  
  •Create css files to control the display effect of labels
  
  Copy code Code As follows:
  
  /*How to prevent all li from displaying small dots? You can use the CSS tag selector*/
  li {
  list-style: none; /* Make the small dot in front of li disappear*/
  margin-left: 18px; /*Move the submenu a certain distance to the right to achieve an indentation effect*/
  display: none; /*Make all submenus Hide the menu first*/
  }
  a{
  text-decoration: none; /*Make the underline of the link disappear*/
  }
  
  
  Convenience brought by jQuery:

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

  2. To display and hide nodes, you only need one statement: toggle(), and you can also implement this function on all nodes in the array.

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