search

Home >Web Front-end >JS Tutorial >Example code for jquery to implement dynamic menu_jquery

Example code for jquery to implement dynamic menu_jquery

WBOY
WBOYOriginal
2016-05-16 17:12:101287browse

The way jquery implements dynamic menus is similar to the way jquery pop-up windows use JavaScript to operate css.

The specific steps can be divided into the following steps:

•Create an html page containing the menu to be expressed

Copy the code The code is as follows:



jquery example 2: jquery menu






                                                                                                                                                             <
  • I am submenu 2

    •  
     





    •Create a css file to control the display of the menu



    Copy code

    The code is as follows:/*To make all li do not display small dots, you can use css tag selector*/li{ /*Make the small dot in front of the list disappear*/ list-style: none;
    /*Indent effect*/
    margin- left: 18px;
    /*Hide menu*/
    display: none;
    }
    a{
    /*How text is displayed*/
    text-decoration: none;
    }


    •Create a JavaScript file to control the display of the menu



    Copy the code

    The code is as follows :/* * Click the main menu and the submenu will be displayed; click the main menu again and the submenu will be hidden * Need to write code to add an onclick event to the main menu when loading. Allows clicking the main menu to display the submenu * Method executed when the registration page is loaded
    */
    $(document).ready(function(){
    //var uls = $("ul ");
    //Find the a node under ul
    var as = $("ul > a");
    as.click(function(){
    //First find the current ul li in , and then let li display
    //Get 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 child nodes of ul
    lis.toggle("slow");
    });
    });


    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：How to dynamically load tables and dynamically add table rows in javascript_javascript skillsNext article：How to dynamically load tables and dynamically add table rows in javascript_javascript skills

    Related articles

    See more