Question

我正在开发我的第一个phonegap应用程序。我试图从Web服务器获取一些数据，然后在可折叠列表中显示它们。但是，我无法动态添加数据列表。此外，列表结构显示在网页中，但我在Android模拟器上看不到任何东西。我只看到黑色的页面。怎么能解决这些问题？任何人都可以帮忙吗？提前谢谢。

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.
mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"
></script>
</head>

<body>

jQuery Mobile Collapsibles 

  <div id = "outer" data-role="content"> 

    <div id="list" data-role="collapsible-set"> 

      <div id="first" data-role="collapsible"> 

        <h3>Güvenlik</h3> 

        <p id="guvenlik">I'm the expanded content.</p> 

      </div> 

      <div id="second" data-role="collapsible"> 

        <h3>Sağlık</h3> 

        <p id="saglik">I'm the expanded content.</p> 

      </div> 
      <div id="third" data-role="collapsible"> 

        <h3>Diğer Servisler</h3> 

        <p id="diger">I'm the expanded content.</p> 

      </div> 

      </div> 

<button id="Sorgula">Sorgula</button>
</div>
<script>
$(document).ready(function()
        {
       ...
        });

</script>

</body>
</html>

Answer 1

您可以像我一样插入列表中的项目，也可以将其写入each函数内部。最后的查找调用只是在结束时关闭它们。

$.each(list, function(index, value) {   
     $("#container").append('<div  data-role="collapsible" data-iconpos="right" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child ui-last-child">'+
            '<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">'+value.name+
            '<ul  data-role="listview">'+some_li_list+'</ul>'+
            '</div>');
    });
$('#container').find('div[data-role=collapsible]').collapsible();

如何在phonegap中动态显示可折叠列表中的数据？

1 个答案: