【解決方法】jsonを使用したマルチレベルメニュー

プログラミングQA

2023.07.25

[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]