javascript - 如何在 jQuery Mobile 嵌套列表中制作列表？

Question

你能告诉我如何在 jQuery mobile 中创建列表吗？我正在尝试动态地在弹出屏幕上的 fiddle 中生成此类型列表。

这是fiddle

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

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

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

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

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

此外，在开始添加嵌套可折叠 div 之前，“基本”可折叠 div 需要存在。所以这一行需要从 for 循环中出来
header = "<div data-role='collapsible' data-collapsed='false' id='"+ headerId + "'><h3>basic</h3></div>";

浏览JSFiddle并将您的代码与我的更改进行比较。

希望有帮助!如果您还有其他问题，请告诉我。