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

    <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>
        <a href="#" mce_href="#"> I am a menu 1</a>
        <li> I'm submenu 1</li>
        <li> I'm submenu 2</li>
        <a href="#" mce_href="#"> I am a menu 2</a>
        <li> I'm submenu 3</li>
        <li> I'm submenu 4</li>
    <div id="content"></div>

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

    list-style: none;
    margin-left: 18px;
    display: none;
    text-decoration: none;

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

   //var uls = $("ul");
   //Find the a node under ul
   var as = $("ul > a");
       //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

Related articles: