0

I was trying to add a show more button or div as in this example here show more button to my jquery rss I made here Jquery rss feed. The problem is that I tried many times to wrap the rss div with a div wrapper and force it to display few lines only, but it didn't work...

so all I want is to hide all rss feeds except say top 3 only. Then whenever I want to show more of the feed threads, I simply click Show more button...

This is the show more button with javascript:

Jquery show button

for (var i = 0; i < 30; i++) {
    $("ul").append("<li>" + i + "</li>");
}

var $li = $("li"),
    chunk = 5;

console.log(chunk, $li);

$li.slice(chunk).hide();

$("button").click(function() {
    $li.filter(":hidden").slice(0, chunk).show();
});

html show button

<ul></ul>
<button>Show more</button>

jquery rss:

$(document).ready(function () {
  $('#test').rssfeed('http://feeds.reuters.com/news/artsculture/', {
    limit:100
  });
});

rss html:

<div id="test"></div>

any idea how I have to do in order to show only the first 3 or say 5 feeds and hide the rest. And display each 3 or 5 feed after clicking the show more button...??

Thanks

4

1 回答 1

1

callbackzRSSfeed.js 中有一个叫做选项的东西。这表示提要在您的 DOM 中的时间点，有点像完成状态。有关更多信息，请参阅示例和stackoverflow 问题。请注意，您必须使用最新版本的 zRSSfeed.js (1.2.0)才能正常工作。. 因此，使用此回调选项，您可以通过 JavaScript 控制您的提要。所以它看起来像这样：

$('#test').rssfeed(feedURL, options , function (e) {
    var $li = $("#test").find(".rssRow"),
        chunk = 3;

    //hide rows > 3
    $li.slice(chunk).hide()

   //insert button after ul
   $("ul").after("<button>Show more</button>");

   //event handler for button
   $("button").click(function () {
      //get the elements hidden            
      var el = $li.filter(":hidden");
      //to hide show more for last click (there aren't any more elements
      if (el.length <= chunk) {
        $(this).hide();
      }
      //show next 3 rows
      el.slice(0, chunk).show();
  });

});

更新小提琴：http: //jsfiddle.net/HLCxV/7/

于 2013-06-05T15:44:30.923 回答