jQuery 모바일 중첩 목록에 목록을 만드는 방법은 무엇입니까?

Question

jQuery 모바일에서 목록을 만드는 방법을 알려주시겠습니까? 나는 동적으로 팝업 화면에 바이올린으로 주어진이 유형 목록을 만들려고합니다. 여기

내가 p 태그에만이 두 rows.In 첫 번째 행을이 바이올린에서 fiddle

입니다. 그러나 두 번째 행에는 중첩 된 접을 수있는 행이 있습니다. 팝업 화면에서 똑같은 것을 만들어야합니다. 나는 첫 번째 줄을 만들 수있다. 하지만 두 번째 줄에서 왜 그럴까요? 내가 틀린 곳을 제안 해 줄 수 있니?

fiddle

$(function() { 

     $('#test').click(function(){ 
      alert('d'); 
      createCommandPopUpTabs(); 
      $("#tabbedPopup").popup("open"); 


     }); 
    }); 
    var tabsHeader = [ "InputParameter", "basic"]; 
    var tabsHeader_basic = [ "XYZ", "Third Level", 
     ]; 

    function createCommandPopUpTabs(){ 
     var header = "<h3 >dd</h3>"; 
     var commmand = 'dd'; 
     var button = '<button onclick="return submitCommand(&quot;'+ 
       '&quot;)" style="" class="donebtn common-button1">Save</button>'; 
     $("#commandInfo").append(button); 

     $("#commandInfoheader").html(header); 
     for (var i = 0; i < tabsHeader.length; i++) { 
      var headerId = tabsHeader[i] + "_tab" + commmand; 
      var header = "<div data-role='collapsible' data-collapsed='false' id='" 
        + headerId + "'><h3>InputParameter</h3></div>"; 
      var content ; 
      if(tabsHeader[i]=="InputParameter"){ 
       content = "<p>yes</p>"; 
      }else if(tabsHeader[i]=="basic"){ 
       for (var i = 0; i < tabsHeader_basic.length; i++) { 
        headerId = tabsHeader_basic[i] + "_tab" + commmand; 
        header = "<div data-role='collapsible' data-collapsed='false' id='" 
          + headerId + "'><h3>basic</h3></div>"; 
        content += getcontend(tabsHeader_basic[i]); 



       } 
      } 

      $("#tabbedSet").append(header); 
      $("#tabbedSet").find("#" + headerId).append(content); 
      $("#tabbedSet").collapsibleset("refresh"); 

     } 
    } 

     function getcontend(name){ 
      if(name=="Third Level"){ 
       return"<p>Third Level></p>"; 
      } if(name=="XYZ"){ 
       return"<p> second Level></p>"; 
      } 
     } 

Answer 1

은 당신의 코드와 논리에 오류가 있습니다. 나는 그 중 몇 가지를 통해 올바른 길로 갈 수 있도록 최선을 다할 것입니다 :

에는 공백이 없어서 잘못된 ID가되는 ID가 나중에 사용되는 공백이 있습니다 신분증에. The value must not contain any space characters.

From the HTML 5 Draft:

은 또한, "기본"축소 사업부는 중첩 된 접을 사업부를 추가하기 전에 존재해야합니다. 그래서이 라인은 JSFiddle을 통해
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";

이동 for 루프에서 와서 내 변경 agaisnt 코드를 비교해야합니다.

잘하면 도움이됩니다. 다른 질문이 있으면 알려줘.

Answer 2

나는 createCommandPopUpTabs() 기능을 업데이트했습니다.

또한 var tabsHeader_basic = ["XYZ", "ThirdLevel"]; 에 Third Level에서 제거 된 공간은 모든 행 디스플레이 확장 이유를 알려 주시기 바랍니다 수있는 Updated Fiddle

function createCommandPopUpTabs() { 
    var header = "<h3 >dd</h3>"; 
    var commmand = 'dd'; 
    var button = '<button onclick="return submitCommand(&quot;' + 
      '&quot;)" style="" class="donebtn common-button1">Save</button>'; 
    $("#commandInfo").html(button); 

    $("#commandInfoheader").html(header); 
    $("#tabbedSet").html(''); 
    for (var i = 0; i < tabsHeader.length; i++) { 
     var headerId = tabsHeader[i] + "_tab" + commmand; 
     var header = "<div data-role='collapsible' data-collapsed='true' id='" + headerId + "'><h3>" + tabsHeader[i] + "</h3></div>"; 
     $("#tabbedSet").append(header); 
     var content; 
     if (tabsHeader[i] == "InputParameter") { 
      content = "<p>yes</p>"; 
      $("#tabbedSet").find("#" + headerId).append(content); 
     } else if (tabsHeader[i] == "basic") { 
      for (var j = 0; j < tabsHeader_basic.length; j++) { 
       var headerId1 = tabsHeader_basic[j] + "_tab" + commmand; 
       var header1 = "<div data-role='collapsible' data-collapsed='true' id='" + headerId1 + "'><h3>" + tabsHeader_basic[j] + "</h3></div>"; 
       var content1 = getcontend(tabsHeader_basic[j]); 
       $("#tabbedSet").find("#" + headerId).append(header1); 
       $("#tabbedSet").find("#" + headerId1).append(content1); 
      } 
     } 
     $("#tabbedSet").collapsibleset("refresh"); 
    } 
}