JQuery, когда применить вопрос - PullRequest
Новая
       51

JQuery, когда применить вопрос

0 голосов
/ 14 сентября 2018

Я делаю динамическое меню, используя REST API. У него есть родительское дочернее соединение. Как ниже enter image description here

Теперь напишите код, как показано ниже

Вот мой документ готов 

$(document).ready(function () {
        var url = "/sites/devbc/_api/lists/getbytitle('NavigationMenu')/items?$select=Id,Title,MenuLevel,Link,hasSubMenu&$filter=Active eq 1 and MenuLevel eq 'Top Level'";
        var html = "";
        $.ajax({
            url: url,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" }
        }).then(function (data) {
            var promises = data.d.results.map(function (item, i) {
                if (item.hasSubMenu == 'Yes') {
                    return getSubMenu(item.Id).then(function (subMenu) {
                        return '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="' + item.Link + '">' + item.Title + '</a>' + subMenu + '</li>';
                    });
                }
                else {
                    return '<li class="nav-item"><a class="nav-link" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a></li>';
                }
            });
            return $.when.apply(null, promises).then(function () {
                $("#navMenu").html(Array.prototype.join.call(arguments, ''));
            });
        });
        $("#navMenu").html(html);
    });

И это мои функции. 

function getSubMenu(id) {
        var url = "/sites/devbc/_api/lists/getbytitle('NavigationMenu')/items?$select=Id,Title,Link,hasSubMenu,ParentMenu/Id&$filter=ParentMenu/Id eq " + id + "&$expand=ParentMenu/Id";
        return $.ajax({
            url: url,
            method: 'GET',
            headers: {
                'Accept': 'application/json; odata=verbose'
            }
        }).then(function (data) {
            var html = '<ul class="dropdown-menu">';
            var arr = data.d.results.map(function (item, i) {
                if (item.hasSubMenu == 'Yes') {
                    return getSubMenu(item.Id).then(function (subMenu) {
                        console.log('<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a>' + subMenu + '</li>');
                        return '<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a>' + subMenu + '</li>';
                    });
                }
                else {
                    html += '<li><a class="dropdown-item" href="' + item.Link + '" target="' + newTab(item.Link) + '">' + item.Title + '</a></li>';
                }
            });
            html += '</ul>';
            return html;
        });
    }
    function newTab(link) {
        if (link.indexOf("http") > -1)
            return "_blank"
        else
            return ""
    }

Теперь проблема в том, что я вызываю getSubMenu рекурсивно, но дело в том, что он создает HTML-тег, но не соединяет его должным образом. Второй рекурсив не является сцеплением. Пожалуйста, кто-нибудь, помогите мне

...