Mcbaloo Ответов: 1

Многоуровневое меню с использованием json


Я пытаюсь построить меню, используя ответ из json. В настоящее время я могу построить родительское меню, но мне трудно добавить подменю. Когда я нажимаю на родительское меню , оно не раскрывается, чтобы показать подменю.


Я добавил образец ответа json, который я должен использовать для построения меню, а также функцию, которую я использую..

Кроме того, я добавил пример того, как выглядит мой html-код

Что я уже пробовал:

{
    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">
                        
                        <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);
               }

           });
       };

ZurdoDev

Вам нужно будет отладить свой код.

1 Ответов

Рейтинг:
0

Nathan Minier

Вы не показываете, как вы вызываете выпадающий список, что, однако, не помогает....

Вы часто употребляете слово "это", и неуместно.

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, но это должно решить проблемы, которые у вас возникли с построением меню.