Question

以下代码将显示ReportGroup列表，但在选择时不会显示每个ReportGroup下的列表项。

    type: "POST",
    url: "wsReports.asmx/GetReports",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (list) {
        var text = '';
        text += "<ul id='newList' class='nav navbar-nav side-nav' data-toggle='dropdown'>";
        $.each(list.d, function () {
            text += "<li><a href='#'>" + this.ReportGroup + "</a>";   
            text += "<ul id='rptList' class='collapse'>"
            $.each(this.Reports, function () {
                text += "<li><a href='#'>" + this.ReportName + "</a></li>";
            });  // end of each rptList
            text += "</ul></li>";
        });    // end of each newList
        text += "</ul>";

        $('#divSideBar').append(text);

    },   //end of success

如果我在rptList中创建class = collapse.in，那么我可以看到列表，但ReportGroups不会崩溃。

Answer 1

我没有正确显示html来创建dropdowms。

        type: "POST",
    url: "wsReports.asmx/GetReports",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (list) {
        // http://tutorialspalace.com/bootstrap-navbar/
        // how to add the classes to the list.
        var text = '';
        text += "<ul id='newList' class='nav navbar-nav side-nav'>";
        $.each(list.d, function () {
            text += "<li class='dropdown'><a href='#' class='dropdown-toggle' data-toggle='dropdown'>" + this.ReportGroup + "<b class='caret'></b></a>";
            text += "<ul id='rptList' class='dropdown-menu'>"
            $.each(this.Reports, function () {
                text += "<li><a href='#'  onclick='GetReport(" + this.ReportID +")'>" + this.ReportName + "</a></li>";
            });  // end of each rptList
            text += "</ul></li>";
        });    // end of each newList
        text += "</ul>";

        $('#divSideBar').append(text);

    },   //end of success

动态引导列表未显示嵌套列表

1 个答案: