none
Javascript 無窮階層選單程式優化 RRS feed

  • 問題

  • 各位前輩好,目前有段程式想利用迴圈優化

    重複地方:每增加一層資料,需要each產生

    優化方向:二維陣列,(1)垂直 判斷主選單結束(2) 水平 判斷子選單結束

    但不知道該如何寫迴圈?

    //資料結構

    var menu = [{ name: "選單一", subdir: [{ name: "選單1-1", subdir: [{ name: "選單1-1-1", }] }, { name: "選單1-2", subdir: [{ name: "選單1-2-1", }] } ] }, { name: "選單二", subdir: [{ name: "選單2-1", subdir: [{ name: "選單2-1-1", }] }, { name: "選單2-2", subdir: [{ name: "選單2-2-1", }] } ] } ];

    //展開選單 function createList(menu) { var html = "<div class='dropdown'>"; $.each(menu, function (e, item) { html += "<div><a class='dropdown-item btn dropdown-toggle' data-toggle='collapse' aria-haspopup='true' aria-expanded='false' aria-controls='collapseExample' href='#collapseExample'>" + item.name + "</a></div>"; if (item["subdir"] == undefined) return; $.each(item.subdir, function (e, item) { html += "<div class='collapse' id='collapseExample'><a class='dropdown-item' href='#collapseExample_2' data-toggle='collapse' aria-haspopup='true' aria-expanded='false' aria-controls='collapseExample_2'>" + item.name + "</a></div>"; createList(item.subdir); $.each(item.subdir, function (e, item) { html += "<div class='collapse'id='collapseExample_2' ><a class=' btn card card-body" + item.name + "' href='#'>" + item.name + "</a></div>"; createList(item.subdir); }) }) }) html += "</div>"; return html; } $("#sidebar").html(createList(menu));





    • 已編輯 I-CHIEH 2020年6月22日 上午 09:49
    2020年6月22日 上午 09:30

所有回覆