Javascript 如何在jQuery移动嵌套列表中创建列表？

您能告诉我如何在jQuery mobile中制作列表吗？我试图使这种类型的列表中给出的小提琴在弹出式屏幕上动态

这是你的电话号码

在这把小提琴里我划了两行，第一行只有p标签。但在第二行中有嵌套的可折叠行。我需要在弹出屏幕上做同样的事情。我能排在第一排。但在我的第二排争是空的为什么？你能指出我错在哪里吗

$（函数（）{
$（“#测试”）。单击（函数（）{
警报（'d'）；
createCommandPopUpTabs（）；
$（“#选项卡弹出”）.popup（“打开”）；
});
});
变量tabsHeader=[“InputParameter”，“basic”]；
var tabsHeader_basic=[“XYZ”，“三级”，
];
函数createCommandPoputAbs（）{
var header=“dd”；
var commmand='dd'；
var按钮='保存'；
$（“#commandInfo”）.append（按钮）；
$（“#commandInfoheader”）.html（header）；
对于（变量i=0；i”；
}else if（tabsHeader[i]=“基本”）{
对于（变量i=0；i
”；
}如果（名称=“XYZ”）{
返回“第二级>
”；
}
}

您的代码和逻辑中有错误。我将只讨论其中的几个，希望能让您走上正确的道路：

在

tabsHeader\u basic

数组中，

Third Level

中有一个空格，您稍后可以将其用作ID，这使其成为无效ID，因为ID中不能有空格

该值不能包含任何空格字符。

此外，在开始添加嵌套的可折叠div之前，“基本”可折叠div需要存在。 所以这一行需要从for循环中出来

header=“基本”

检查并将您的代码与我的更改进行比较

希望这有帮助！如果您还有其他问题，请告诉我。
我已更新了
createCommandPoputAbs（）
函数

还删除了
var tabsHeader_basic=[“XYZ”，“ThirdLevel”]上第三级
中的空格
检查

函数createCommandPopUpTabs（）{
var header=“dd”；
var commmand='dd'；
var按钮='保存'；
$（“#commandInfo”）.html（按钮）；
$（“#commandInfoheader”）.html（header）；
$（“#选项卡集”）.html（“”）；
对于（变量i=0；i”；
$（“#选项卡集”）.find（“#”+headerId）.append（内容）；
}else if（tabsHeader[i]=“基本”）{
对于（var j=0；j
答案很好，您能告诉我为什么所有行都显示expand吗？表示“xyz”，第三个lvel和基本所有行都已展开。。！！这是因为divs上的
data-collapsed='false'
属性。将其更改为
data='true'
Awesome，如果您觉得有帮助，请将此标记为答案。谢谢
 $(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>";
            }
        }

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