JQuery Implementation of retractable and expanded cascading menu instance code _ javascript tips-js tutorial

This article mainly introduces the instance code of the cascading menu that can be scaled and expanded using jQuery. If you need it, you can refer to it, I hope it will help you. If you use pure JavaScript code instead of a framework, it may be daunting to make a cascading menu, but with the framework, this is easy. This is the benefit of the Framework, which greatly improves the development efficiency and is more reliable and easy to maintain. The general steps for implementing cascading menus using jQuery are as follows:

• 1. Use

And
• Create a cascade menu
  

  The Code is as follows:

  
  Http://www.w3.org/TR/html4/loose.dtd>
  
  
  JQuery application example of itcast.cn: pop-up menu
  
  
  
  
  
  

  
  I am menu 1
  
  • I am submenu 1
  
  
  • I am submenu 2
  
  
  
  
  
  I am menu 2
  
  • I am submenu 3
  
  
  • I am submenu 4
  
  
  
  
  
  
  
  • 2. Write JavaScript code to control the contraction of cascading menus
  

  The Code is as follows:

  
  // When you need to click the button of the main menu, the corresponding sub-menu can be displayed. Click the sub-menu again to hide
  // You need to write code to add onclick events to all main menus during page loading.
  // Ensure that the sub-menu can be displayed or hidden when you click the main menu
  // How to execute registration page loading
  $ (Document). ready (function (){
  // First, you need to find all the main menus.
  // Register the click event for all the main menus.
  // Locate the node in ul
  Var as =$ ("ul> ");
  As. click (function (){
  // Here you need to find the li in the current ul, and then let li display it
  // Obtain the currently clicked node
  Var aNode = $ (this );
  // Find all the li sibling byte points of the current node
  Var lis = aNode. nextAll ("li ");
  // Show or hide sub-nodes
  Lis. toggle ("show ");
  });
  });
  

  
  • Create a css file to control the Display Effect of tags
  

  The Code is as follows:

  
  /* You can use the css Tag selector to prevent all li nodes from displaying small dots */
  Li {
  List-style: none;/* remove the dot before li */
  Margin-left: 18px;/* move the sub-menu to the right for indentation */
  Display: none;/* Hide all sub-menus first */
  }
  A {
  Text-decoration: none;/* remove the underline Of the link */
  }
  

  
  JQuery brings convenience:

  1. You only need one $ (this) to find the menu to be clicked.

  2. to display and hide a node, use only one statement: toggle (). In addition, all nodes in the array can have this function.

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