jquery移动手风琴不工作(不显示)

时间:2014-02-11 09:01:06

标签: jquery jquery-mobile

我在手风琴中做了一个简单的例子。实际上,当我使用动态数据时,我的列表不显示。 我想制作如下所示的演示。

这是我的代码 http://jsfiddle.net/3H87k/

var name = new Array();
name[0] = "Saab";
name[1] = "Volvo";
name[2] = "BMW";
name[3] = "BOW";
name[4] = "BLW";

var address = new Array();
address[0] = "Sjnnnnvvf";
address[1] = "Vtyubolvo";
address[2] = "BhjhubbMW";
address[3] = "ftyui";
address[4] = "fybmi";

$(document).ready(function () {
    for(var i=0;i<name.length;i++){
        $('#folderData').append('<div data-role="collapsible"<h3>'+
                                name[i]+'</h3>'+
    '<p>'+address[i]+'</p>'+
    '</div>');
    }

    // Refreshing the list
   // $('#folderData').listview('refresh');
}); 
$(document).on('click','.rowclick',function(){
     $('.ui-li-heading').removeClass('selected');
  $(this).find('.ui-li-heading').addClass('selected'); 
});

1 个答案:

答案 0 :(得分:1)

您在可折叠div定义中缺少>

除了对于动态添加的元素,您必须在元素上强制collapsible

代码:

$('#folderData').find('div[data-role=collapsible]').collapsible();  

演示:http://jsfiddle.net/8mWZv/

主题概述

jQuery Mobile拥有一个强大的主题框架,支持多达26组工具栏,内容和按钮颜色,称为“样本”。该框架带有五个定义的主题(样本“a”到“e”),可以轻松使用,删除或覆盖。

参考:https://learn.jquery.com/jquery-mobile/theme-roller/

因此,您可以构建自定义样式。