Question

你能告诉我如何在jQuery mobile中制作列表吗？我试图在弹出屏幕上动态地制作这个类型列表。

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

 $(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

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

在tabsHeader_basic数组中，Third Level中有一个空格，您稍后将其用作ID，这会使其成为无效ID，因为您的ID中不能包含空格。

From the HTML 5 Draft:
The value must not contain any space characters.

此外，＆＃34;基本＆＃34;在开始添加嵌套的可折叠div之前，需要存在可折叠div。所以这条线需要来自for循环
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";

浏览JSFiddle并比较您的代码，了解我的更改。

希望这有帮助！如果您有任何其他问题，请与我们联系。

Answer 2

我已更新createCommandPopUpTabs()功能。

同时删除Third Level var tabsHeader_basic = ["XYZ", "ThirdLevel"];上的空格查看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");
    }
}

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

2 个答案: