[ad_1]
jsonからの応答を使用してメニューを構築しようとしています。 現在、親メニューを構築できていますが、サブメニューを追加するのが難しいことがわかりました。 親メニューをクリックしても、ドロップダウンしてサブメニューが表示されません。
メニューの構築に使用する JSON 応答のサンプルと、使用している関数を追加しました。
また、HTMLがどのように見えるかのサンプルを追加しました
私が試したこと:
JavaScript
{ status: "Success", menus: [ { menu_icon: null, menu_name: "Stock", submenu: [ { menu_name: "Manage Stocks", controller_name: "ManageStocks", action_name: "ManageStocks" } ] }, { menu_icon: null, menu_name: "Property", submenu: [ { menu_name: "Manage Property", controller_name: "ManageProperty", action_name: "ManageProperty" } ] } ] }
<ul class="nav nav-main" id="menuList"> <li class="nav-parent"> <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index"> class="fa fa-home"> <span>Dashboard</span> </a> </li> <li class="nav-parent"> <a class="nav-link" href="#"> <span>Pages</span> </a> <ul class="nav nav-children"> <li> <a class="nav-link" href="pages-signup.html"> Sign Up </a> </li> </ul> </li></ul>
function buildMenu(parent, item) { $.each(item, function () { var li = $('<li class="nav-parent"><a class="nav-link" href="#"><span>' + this.menu_name + '</span></a></li>'); li.appendTo(parent); if (this.submenu != null) { var ul = $('<ul class="nav nav-children"></ul>'); ul.appendTo(li); buildMenu($(ul), this.submenu); } }); };
解決策 1
ただし、ドロップダウンを呼び出す方法が示されていないため、役に立ちません…
あなたは「this」を多用していますが、不適切です。
JavaScript
function buildMenu(parent, item) { $.each(item, function () { var li = $('<li class="nav-parent"><a class="nav-link" href="#"><span>' + item.menu_name + '</span></a></li>'); li.appendTo(parent); if (item.submenu != null) { var ul = $('<ul class="nav nav-children"></ul>'); ul.appendTo(li); buildMenu($(ul), item.submenu); } }); };
CSS がどのようなものであるかはわかりませんが、メニューの構築で発生している問題はこれで解決されるはずです。
[ad_2]
コメント