Javascript 创建动态导航栏_Javascript_Jquery_Html_Css

Javascript 创建动态导航栏

javascript jquery html css

Javascript 创建动态导航栏,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想要一个导航栏，其中包含从xml文件读取的值以及显示菜单和子菜单下面是html代码： <!DOCTYPE html> <html> <head> <title>Try Menu</title> <link href="Stylesheet/StyleSheetNav.css" rel="stylesheet" type="text/css" /> <meta nam

我想要一个导航栏，其中包含从xml文件读取的值以及显示菜单和子菜单

下面是html代码：

<!DOCTYPE html>
     <html>
     <head>
     <title>Try Menu</title>
     <link href="Stylesheet/StyleSheetNav.css" rel="stylesheet" type="text/css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/jscript"></script>
     <script src="Script/jquery-2.1.4.js" type="text/jscript"></script>
     <script src="Script/JScriptMenu.js" type="text/jscript"></script>
     </head>
     <body>
     <div id="messages">
     <script src="Script/JScriptMenuHover.js" type="text/javascript"></script>
     </div>
     </body>
     </html>

主菜单打印得很好，但每个菜单中只有前3个子菜单

每当我将鼠标悬停在主菜单的第一项上时，它只显示前三个子菜单。其读数仅适用于所有菜单项的前三个子菜单。

他们的问题是js文件还是xml文件不正确

我希望我的菜单是这样的

*Home
    ->Pro
    ->Educ
*Products
    ->cloud
    ->Web

等等

请帮助。

“他们的问题是js文件还是xml文件不正确？”我们怎么知道？你告诉我们。它工作吗？它从xml文件中读取前三个子菜单。不是特定的子菜单。。对于所有元素，只有前三个。。。。请看图片。。。它应该像Product->EduCube->WebSol。。。

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET", "XMLNav.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        var x = xmlDoc.getElementsByTagName("mainmenu");
        var len = x.length;
        var y = xmlDoc.getElementsByTagName("submenu");

        document.write("<div><nav id='mainNav'><ul id='main-menu-ul'>");

        for (i = 0; i < len; i++) {
            document.write("<li class='main-menu'><a href='#'>");
            document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
            document.write("</a>");
            var z = y[i].childNodes;
            if (xmlDoc.getElementsByTagName("submenu").length != 0) {
                document.write("<div><ul class='sub-menu' ");
                for (j = 0; j < z.length; j++) {
                    document.write("<li><a href='#'>");
                    document.write(y[j].getElementsByTagName("text")[0].childNodes[0].nodeValue);
                    document.write("</a></li>");
                }
                document.write("</ul></div>");
            }
            else {
                continue;
            }
            document.write("</li>");
        }
        document.write("</ul></nav></div>");

$(document).ready(function () {

    $('.main-menu').hover(function () {
        $(this).find('.sub-menu').fadeIn('fast');
        $(this).css('background-color', '#99CA46');
    }, function () {
        $(this).find('.sub-menu').fadeOut('fast');
        $(this).css('background-color', '#434343');
    });
});

*Home
    ->Pro
    ->Educ
*Products
    ->cloud
    ->Web