Question

在尝试使用jquery创建动态手风琴时，我无法弄清楚为什么单个元素没有折叠。它们只是作为文本而不是取得手风琴效果。谁能发现我的错误？（假设数据变量都包含数据）

编辑我为了好奇而尝试使用firefox而不是chrome，手风琴行为正常工作......我不明白

var outdiv = $('<div data-role="collapsible-set"></div>');

for(var i=0; i<data.length; i++){

    var innerdiv = $('<div data-role="collapsible" data-collapsed="true" ></div>');
    innerdiv.append('<h3>' + 'Tweet #' + i + '</h3>');
    innerdiv.append('<p>' + data[i].text + '</p>');

    outdiv.append(innerdiv);

    outdiv.appendTo('#output');


}

Answer 1

您需要在collapsibleset()

上调用outdiv方法

$('#output [data-role=collapsible-set]').collapsibleset();

在这里 jsFiddle

Answer 2

我不是jQuery移动用户，但我认为您需要为添加的内容设置行为，例如循环后的$('#output').trigger('create')。

讨论了更多here

Answer 3

我不知道你是否可以用这种方式选择整个元素，但你也可以使用jQuery的Attribute Contains Selector

//So your outdiv would become 
var outdiv = $('div[data-role*="collapsible-set"]');

//And then innerdiv, something like
var innerdiv = $('div[data-role*="collapsible"][data-collapsed*="true"]');

Answer 4

将您的代码更改为：

outdiv.append(innerdiv).collapsibleset("refresh");

您必须下载 jQuery Mobile ver 1.3.2 。

动态Jquery移动手风琴

4 个答案: