Question

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

然而，当我设置一个正常的可折叠集时，它不会导入列表，我得到一个空白屏幕的内容。

我已经能够让它略微工作但我在listview中有一个我不想要的可折叠集。然而，摆脱列表并将其全部更改为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()之外。此外，您无法在锚点中包围整个可折叠，因为可折叠标题锚点可折叠打开和关闭。相反，您可以在内容中包围内容或添加按钮/限制：

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();
    });
}

正在使用 DEMO

使用jquery在phonegap中进行折叠设置将无法正常工作

1 个答案: