阵列动态菜单逻辑

Array Dynamic Menu Logic?

本文关键字：菜单 动态 阵列      更新时间：2023-09-26

好的，我要做的是创建一个基于数组的动态菜单第一维度元素将是顶级，第二维度级别将是所述父级的子项，我将如何做到这一点？

$(document).ready(function(e) {
//var maxLevels = 3;//Max Levels Of The List TO Traverse
var nav = new Array();
nav[0] = "Item A";
nav[0][0] = "Item AB"; 
nav[1] = "Item B";
nav[1][0] = "Item BA";
var menu = "";
nav.forEach(function(e) {
    menu += "<li>" + e + "</li>";
});

$('#info').html(menu);

});

声明数组nav后，您可以使用nav[index]访问其元素，但不能仅通过声明nav[0][0]向项0添加第二个维度-在使用它之前，您需要将nav[0]声明为数组：

nav[0] = [];
nav[0][0] = ...

但是，您可以用数组文字在一个语句中声明所有内容，出于您的目的，我建议使用对象数组：

var nav = [
    { "title" : "Item A",
      "submenu" : [ "Item A1", "Item A2" ] },
    { "title" : "Item B",
      "submenu" : [ "Item B1", "Item B2", "Item B3"] }
];

如果你想要的输出是这样的：

<ul>
   <li>Item A
       <ul>
           <li>Item A1</li>
           <li>Item A2</li>
       </ul>
   </li>
   <li>Item B
       <ul>
           <li>Item B1</li>
           <li>Item B2</li>
           <li>Item B3</li>
       </ul>
   </li>
</ul>

你可以这样做：

var $menu = $("<ul></ul>");
$.each(nav, function(i, val) {
    var $item = $("<li></li>").html(val.title),
        $sub = $("<ul></ul>");
    $.each(val.submenu, function(j, sub) {
        $sub.append($("<li></li>").html(sub));
    });
    $menu.append($item.append($sub));    
});
$("body").append($menu);

演示：http://jsfiddle.net/9kRs3/

当然，您可以像在原始代码中那样将菜单构建为字符串，但我选择了边创建边创建元素。

使用上面的对象结构，您可以很容易地添加一些额外的属性来定义单击每个项目时会发生什么。您可以使子菜单阵列中的每个项都具有与顶层相同的对象结构，这样您就可以根据需要嵌套越来越多的层。

您试图构建层次结构的方式将不起作用（正如nnnnnn已经解释的那样）。

你可以尝试这样的东西，它适用于任何级别：

var nav = [{
    label: 'Item A',
    children: [{
        label: 'Item AB',
        children: []
    }]
}, {
    label: 'Item B',
    children: [{
        label: 'Item BA',
        children: []
    }]
}​]​;
​var menu = [];
(function build(elements) {
   menu.push('<ul>');
   $.each(elements, function (i, val) {
     menu.push('<li>', val.label);
     build(val.children);
     menu.push('</li>');
   });
   menu.push('</ul>');
}(nav));
$('#info').html(menu.join(''));

​演示：http://jsfiddle.net/jw3zm/

我不确定数组是否是最好的方法。你可以使用数组和对象的组合，这会更容易IMO。这将适用于一个子菜单，但可以扩展。。。http://jsfiddle.net/elclanrs/Tp4KM/

var menu = {
    about: ['one', 'two', 'three'],
    contact: ['four', 'five']
};
var items = '';
for (var m in menu) {
    items +=
        '<ul class="menu">' +
            '<li><a href="#">' + m + '</a>' +                
                '<ul>' +
                    '<li><a href="#">' +
                    menu[m].join('</a></li><li><a href="#">') +
                    '</a></li>' +
                '</ul>' +
            '</li>' +
        '</ul>';
}
$('body').append(items);

我使用Yoshi的javascript，在这里你可以看到我的HTML代码。问题是我的网站是空白的，并没有显示列表。我不明白为什么它没有运行，因为代码没有显示错误。

    <!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
    </head>
<body>
    <div id="info"></div>
</body>
</html>
相关文章：