陣列動態菜單邏輯？

好吧，我想要做的是創建一個基於數組的動態菜單第一個dimesion元素將是頂級和第二個維度級別將是所述父級的子項目我將如何做到這一點？陣列動態菜單邏輯？

$(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); 


});

來源

2012-03-21 Aaron

在宣佈你的陣列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/

當然，你可以建立菜單起來像一個字符串你的原始代碼，但我已經選擇創建元素，因爲我去。

使用上面的對象結構，您可以輕鬆地添加一些額外的屬性來定義每個項目被點擊時會發生什麼。並且可以使子菜單數組中的每個項目具有與頂級相同的對象結構，以便根據需要嵌套更多和更多級別。

來源

2012-03-21 21:30:41 nnnnnn

你試圖建立你的層次結構的方式將無法正常工作（如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/

來源

2012-03-21 21:33:47 Yoshi

我不知道一個數組是最好的方式。您可以使用混合的數組和對象，這會讓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);

來源

2012-03-21 21:37:53 elclanrs

我使用的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>

來源

2014-05-04 19:29:56 fubu

陣列動態菜單邏輯？

回答

相關問題