Jquery implementation of dynamic menu instance code

2020-03-30 00:03:03
OfStack

Jquery implements dynamic menus in much the same way as jquery pop-up Windows, using JavaScript to manipulate CSS.

The specific steps can be divided into the following steps:

The & # 8226; Create an HTML page with a menu to express


<html>
  <head>
    <title>jquery The sample 2 : jquery The menu </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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> I'm submenu 1</li>
        <li> I'm submenu 2</li>
    </ul>
    <ul>
        <a href="#" mce_href="#"> I am a menu 2</a>
        <li> I'm submenu 3</li>
        <li> I'm submenu 4</li>
    </ul>
    <div id="content"></div>
  </body>
</html>

The & # 8226; Create a CSS file to control the display of the menu



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

The & # 8226; Create a JavaScript file to control the display of the menu



$(document).ready(function(){
   //var uls = $("ul");
   //Find the a node under ul
   var as = $("ul > a");
   as.click(function(){
       //First find the li in the current ul and then let the li display
       //Gets 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 children of ul
       lis.toggle("slow");
   });
});