動的ブートストラップネストされたリストを表示していないリスト

Question

次のコードは、ReportGroupsのリストを表示しますが、選択されたときに各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

dropdowmsを作成するためにhtmlが正しく表示されませんでした。

 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