使用 jquery 的 phonegap 中的可折叠设置将无法正常工作

Question

我正在尝试在 phonegap 中创建一个可折叠集。它将 RSS 提要详细信息拉入以创建列表。我希望列表是一个可折叠的集合。

但是，当我将其设置为正常的可折叠集时，它不再导入列表，并且我得到一个显示内容的空白屏幕。

我已经能够让它稍微工作，但我在列表视图中有一个我不想要的可折叠集。然而，删除列表并将其全部更改为 WC3 显示如何创建可折叠集的方式搞砸了并且不会拉取提要。

关于如何使其正常工作的任何想法？

我希望我的列表如下所示：在这里看到的第一个例子： http://demos.jquerymobile.com/1.2.0/docs/content/content-collapsible-set.html

但是当我这样设置时：它出现空白。

<script type="text/javascript">
   function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';
            $.each(postlist, function(idx, data) {
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '</a>';
            });
            html += '</div>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist div[data-role=collapsible]").collapsible();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>

<div role="main" class="ui-content">
   <div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
 </div><!-- /content -->

所以我尝试了：

<script type="text/javascript">
   function initializeLifeHacker() {
            url = 'http://feeds.gawker.com/lifehacker/full';
            var feed = new google.feeds.Feed(url);
            feed.setNumEntries(25);
            feed.load(function(result) {
            var postlist = result.feed.entries;
            var html = '<ul data-role="listview" data-inset="true" data-theme="a">';
            $.each(postlist, function(idx, data) {
            html += '<li>';
            html += '<a href="#" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">';
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry"><h2>' + data.title + '</h2><p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p></div>';
            html += '</a>';
            html += '</li>';
            });
            html += '</ul>';
            $("#lifeHackerFeedlist").append(html);
            $("#lifeHackerFeedlist ul[data-role=listview]").listview();
            });
            }

            $(document).ready(function(){
            google.load("feeds", "1",{callback:initializeLifeHacker}); 
            });    
        </script>

<div role="main" class="ui-content">
   <div id="lifeHackerFeedlist" data-role="collapsible-set"></div>
 </div><!-- /content -->

这会导致折叠内部的折叠，因此出现嵌套折叠，这是我不想要的这是结果：它看起来类似于： http://i.stack.imgur.com/8OsAU.jpg

如何获得我想要的外观？

提前谢谢你，

Answer 1

您的代码只创建了一个可折叠的页面，其中添加了所有文章，因为您将该行放在了 $.each() 之外。此外，您不能将整个可折叠项包围在一个锚点中，因为可折叠页眉锚点会切换可折叠项的打开和关闭。相反，您可以围绕内容或在内容中添加 button/limk：

function initializeLifeHacker() {
    url = 'http://feeds.gawker.com/lifehacker/full';
    var feed = new google.feeds.Feed(url);
    feed.setNumEntries(25);
    feed.load(function (result) {
        var postlist = result.feed.entries;
        var html = '';
        $.each(postlist, function (idx, data) {
            html += '<div data-role="collapsible" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" class="entry">';           
            html += '<h2>' + data.title + '</h2>';
            html += '<p class="author"> Author: ' + data.author + '</p><p class="description">' + data.contentSnippet + '</p>';
            html += '<a href="#" class="ui-btn" onclick="window.open(\'' + data.link + '\', \'_blank\', \'location=yes\')">Open Article...</a>';
            html += '</div>';
        });

        $("#lifeHackerFeedlist").append(html).find("div[data-role=collapsible]").collapsible();
    });
}

Working DEMO

使用 jquery 的 phonegap 中的可折叠设置将无法正常工作

collapsible-set in phonegap using jquery won't work properly

jquery-mobile

cordova

jquery-mobile-collapsible