列表不在jQuery中显示？

Question

我正在制作动态列表，但不显示。为什么呢？

这是我的小提琴：http://jsfiddle.net/mFScX/4/

function buildNavForNodes(nodes) {
    console.log(nodes);
  var result = '<div data-role="collapsible"> <ul>';
  var i = 0;
  var len = nodes.length;
  for(; i < len; i++) {
    result += buildNavForNode(nodes[i]);
  }
  return result + " </ul></div>";
}

应该显示如下：http://jsfiddle.net/Dn4XB/4/

Button数组有三个对象： 这意味着三个可折叠行显示。

**Button
Button
Button**

现在，0对象的Button数组索引具有按钮数组。

所以在索引0中，按钮有另一个可折叠的行。

Answer 1

<击> 很可能你想要这样的东西（Example）：

function buildNav(nodes) {
    var i = 0, len = nodes.length, result;
    for(; i < len; i++) {
        result ='<div data-role="collapsible"><h1><a>Button</a></h1><ul>';
        if(!nodes[i].Button) result += '<li><h3>Button</h3></li></ul></div>';
        else result += buildNav(nodes[i].Button);
    }
    return result;
}

我不确定它是否正确，但在插入.trigger('create')后应调用HTML。

更新：（Example）

function buildNav(nodes) {
    var result = '<div data-role="collapsible-set" id="stuff">';
    var i = 0, len = nodes.length;
    for(; i < len; i++) {
        result += "<div data-role='collapsible' data-content-theme='c'><h3><a>Button</a></h3>";
        if(nodes[i].Button) {
            result += buildNav(nodes[i].Button) + "</div>";
        }
        result += "</div>";
    }
    return result + "</div>";
}

$(function(){
    $('#test').html(buildNav(testData.Button)).trigger('create');
});

Answer 2

每个可折叠容器都需要看起来像这样：

<div data-role="collapsible">
     <h1><a>Button</a></h1>
            <ul data-role="listview">
                <li><a>Button</a></li>
            </ul>

</div>