javascript - 创建多级导航菜单的问题

Question

我需要使用 JavaScript 创建多级导航菜单。我已经创建了第一级菜单，但我需要创建第二级和第三级菜单，但不知何故，当我创建它们时，我没有得到想要的结果。

请找到我的以下工作场景。

阶段 01

我正在使用下面的 JavaScript 创建多级菜单。

JS：

if (typeof (XMLHttpRequest) != 'undefined') {
    var getXMLHttpObj = function() {
        return new XMLHttpRequest();
    };

} else {
    var getXMLHttpObj = function() {
        var activeXObjects = [ 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0',
                'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP',
                'Microsoft.XMLHTTP' ];

        for ( var i = 0; i < activeXObjects.length; i++) {
            try {
                return new ActiveXObject(activeXObjects[i]);
            } catch (err) {
            }
        }
    };
}

// Code for Identify page with page parameter
var pageName = getUrlVars()["layout_config"]; // read this parameter and store

var re = /_/g, str = pageName;
var a = 6;
var b = 0;
var c = 0;
var i = 0;
var strLength = str.length;

while ((match = re.exec(str)) != null) {
    if (i == 0) {
        a = match.index;

    } else {
        b = match.index;

    }
    c = a + 1;
    //alert("match found at " + match.index+"i"+ i);
    i++;

    if (i > 1) {
        break;
    }
}

var mainMenuCatName = pageName.substring(0, a);
var subMenuCatName = "";
if (b != 0) {
    subMenuCatName = pageName.substring(c, b);
} else {
    subMenuCatName = pageName.substring(c, strLength);
}

//alert(mainMenuCatName + ", " + subMenuCatName);
// in to pageName
var currentElement = "";
var lastElement = "";

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
            function(m, key, value) {
                vars[key] = value;
            });
    return vars;
}
// alert(pageName);

// XML object
var newsSubscriptionsPage_id;
var selectedSubItem;
var subMenuId;

var ajxObj = getXMLHttpObj();

ajxObj.open('GET', 'xml/leftMenu.xml', false);
ajxObj.send(null);
var myXml = ajxObj.responseXML;
prs = myXml.getElementsByTagName("tab");

// load XML Base Top Menu
var totalMenuItems = prs.length;
var totalMenuWapper = document.getElementById("leftNav");
var ul = document.createElement("ul");
var totalLoadTab = 0;
if (totalMenuWapper != null) {
    totalMenuWapper.appendChild(ul);

    for (i = 0; i < totalMenuItems; i++) {

        var li = document.createElement("li");
        ul.appendChild(li);

        var tabName = prs[i].childNodes[0].nodeValue;
        var URL = prs[i].getAttribute("href");
        var targetURL = prs[i].getAttribute("target");
        var urlAlias = prs[i].getAttribute("name");
        var cosClass = prs[i].getAttribute("cssClass");
        var submenuWidth = prs[i].getAttribute("width");
        subTabSour = prs[i].getElementsByTagName("subTab");
        var totalSubmenuItems = subTabSour.length;
        tabName = newLine(tabName);
        //alert(tabName);   
        if (totalSubmenuItems > 0) {
            // alert(newsSubscriptionsPage_id);
            // newsSubscriptionsPage_id = 'menu_' + i;

            li.innerHTML = "<a id='menu_" + i + "' href='" + URL
                    + "' class='submenuItem' target='" + targetURL + "' >"
                    + tabName + "</a>";

            var tabBtnWidth = li.offsetWidth;

            var subUl = document.createElement("ul");
            li.appendChild(subUl);
            var subMenuWidth = subUl.offsetWidth;
            var subMenuLeftMarg = Math.round((subMenuWidth / 2)
                    - (tabBtnWidth / 2)) - 1;
            subUl.setAttribute("style", "margin-left:-1px; width:"
                    + submenuWidth + "px");
            subUl.style.marginLeft = "-1px";
            subUl.style.width = submenuWidth + "px";

            var lastTab = totalSubmenuItems - 1;

            for (a = 0; a < totalSubmenuItems; a++) {

                var subTabName = subTabSour[a].childNodes[0].nodeValue;
                var subURL = subTabSour[a].getAttribute("href");
                var targeSubtURL = subTabSour[a].getAttribute("target");
                var subUrlAlias = subTabSour[a].getAttribute("name");
                var subLi = document.createElement("li");
                subMenuId = "subMenu_" + i + "_" + a;
                subTabName = newLine(subTabName);
                subUl.appendChild(subLi);

                if (lastTab == a) {
                    //alert("last_mach");
                    subLi.innerHTML = "<a href='"
                            + subURL
                            + "' id='"
                            + subMenuId
                            + "'target='"
                            + targeSubtURL
                            + "'style='width:"
                            + submenuWidth + "px;' >" + subTabName + "</a>";
                    //alert(urlAlias+" = "+mainMenuCatName+", "+subUrlAlias+"=="+subMenuCatName);
                    if (urlAlias == mainMenuCatName
                            && subUrlAlias == subMenuCatName) {
                        //alert("last_mach"+subMenuId);
                        currItem(subMenuId, "selected");

                    }
                } else {

                    subLi.innerHTML = "<a href='" + subURL + "' id='"
                            + subMenuId + "'target='" + targeSubtURL
                            + "' style='width:" + submenuWidth + "px'>"
                            + subTabName + "</a>";
                    if (urlAlias == mainMenuCatName
                            && subUrlAlias == subMenuCatName) {
                        currItem(subMenuId, "selected");


                    }
                }

            }// end for loop

            if (urlAlias == mainMenuCatName) {
                newsSubscriptionsPage_id = 'menu_' + i;
                currItem(newsSubscriptionsPage_id, "subSelected");

            }

        } else {

            if (cosClass != null) {

                li.innerHTML = "<a id='menu_" + i + "' name='" + urlAlias
                        + "' href='" + URL + "' target='" + targetURL
                        + "' class='" + cosClass + "'>" + tabName + "</a>";
            } else {

                li.innerHTML = "<a id='menu_" + i + "' name='" + urlAlias
                        + "' href='" + URL + "' target='" + targetURL + "'>"
                        + tabName + "</a>";
            }

            if (urlAlias == mainMenuCatName) {
                newsSubscriptionsPage_id = 'menu_' + i;
                currItem(newsSubscriptionsPage_id, "selected");


            }

        }
        totalLoadTab = i + 1;

    }// end for loop

}

// First load all menu item than call selectedItem function
if (totalLoadTab == totalMenuItems) {

    //selectedItem();

}

function currItem(id, className) {

    currentElement = document.getElementById(id);
    currentElement.setAttribute("className", className); // className
    // use //
    // for ie7
    currentElement.setAttribute("class", className); // this worked
    // all

}

// this code for line Brake 

function newLine(input_Text) {
    var tabText = input_Text;
    var tabTextLength = tabText.length;
    var lineBrakeText = /@newLine/g;
    var lineBrakeTextLength = 8;
    var text = "";
    var startPosion = 0;
    //alert(tabTextLength);
    while ((newLineBrake = lineBrakeText.exec(tabText)) != null) {

        brakePosition = newLineBrake.index;
        text_i = tabText.substring(startPosion, brakePosition) + "<br />";
        //alert(startPosion);
        startPosion = brakePosition + lineBrakeTextLength;
        //alert(text + text_i);
        text = text + text_i;
    }
    text = text + tabText.substring(startPosion, tabTextLength);
    //tabName = text;
    //output_Text = text;

    return text;

}

阶段 02

我将 JavaScript 声明放在下面的 XML 文件中，如下所示。

XML：

<topMenu>
    <tab href="#" target="_self" name="abc">abc</tab>
    <tab href="#" target="_self" width="200" name="def">def
        <subTab href="#" target="_self" name="def1">def1</subTab>
        <subTab href="#" target="_self" name="def2">def2</subTab>
        <subTab href="#" target="_self" name="def3">def3</subTab>
        <subTab href="#" target="_self" name="def4">def4</subTab>
        <subTab href="#" target="_self" name="def5">def5</subTab>
  </tab>
</topMenu>

阶段 03

最后，在 HTML 中，我得到了这个渲染输出。

渲染输出：

<ul>
<li><a target="_self" href="#" name="abc" id="menu_0">abc</a></li>
<li><a target="_self" class="submenuItem" href="#" id="menu_1">def</a>
  <ul style="margin-left:-1px; width:200px">
    <li><a style="width:200px" target="_self" id="subMenu_1_0" href="#">def1</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_1" href="#">def2</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_2" href="#">def3</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_3" href="#">def4</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_4" href="#">def5</a></li>
  </ul>
</li>
</ul>

我需要的

我需要以一种能够创建多级菜单的方式对 JavaScript 进行更改。

例如，我的 XML 应该如下所示。

<topMenu>
    <tab href="#" target="_self" name="abc">abc</tab>
    <tab href="#" target="_self" width="200" name="def">def
        <subTab href="#" target="_self" name="def1">def1</subTab>
        <subTab href="#" target="_self" name="def2">def2
             <topMenu-level02>
                <tab href="#" target="_self" name="abc">abc</tab>
                  <subTab-level02 href="#" target="_self" name="def21">def21</subTab-level02>
                  <subTab-level02 href="#" target="_self" name="def22">def22</subTab-level02>
                </tab>
             </topMenu-level02>
        </subTab>
        <subTab href="#" target="_self" name="def3">def3</subTab>
        <subTab href="#" target="_self" name="def4">def4</subTab>
        <subTab href="#" target="_self" name="def5">def5</subTab>
  </tab>
</topMenu>

我渲染的输出应该如下所示。

<ul>
<li><a target="_self" href="#" name="abc" id="menu_0">abc</a></li>
<li><a target="_self" class="submenuItem" href="#" id="menu_1">def</a>
  <ul style="margin-left:-1px; width:200px">
    <li><a style="width:200px" target="_self" id="subMenu_1_0" href="#">def1</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_1" href="#">def2</a>
     <ul>
        <li><a style="width:200px" target="_self" id="" href="#">def21</a></li>
        <li><a style="width:200px" target="_self" id="" href="#">def22</a></li>
     </ul>        
    </li>
    <li><a style="width:200px" target="_self" id="subMenu_1_2" href="#">def3</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_3" href="#">def4</a></li>
    <li><a style="width:200px" target="_self" id="subMenu_1_4" href="#">def5</a></li>
  </ul>
</li>
</ul>

等待解决方案。