jQuery, если что-то больше, чем значение, то спрячьте и добавьте кнопку, чтобы показать, что скрыто?

Question

Именно то, что написано в моем названии, является проблемой, с которой я сейчас сталкиваюсь.

Я проверяю div, сколько ссылок напечатано на php, и если их больше 10, я хочу скрыть их и добавить кнопку с надписью read more, а затем показать остальные ссылки.

        $(document).ready(function() {

     var newsRss = $('#rssNews >li').length;
     var driftRss = $('#rssDrift >li').length;

        $(window).load(function() {
            if(newsRss > 10)
     alert(newsRss);

});

    });

это то, как далеко я продвинулся с кодом.

Я буду рад услышать каждый совет и трюк, с которыми вы, ребята, можете мне помочь!

С наилучшими пожеланиями,

Charlie

Answer 1

Вы можете сделать что-то довольно простое, как это:

$(function() {
    $("#rssNews, #rssDrift").each(function() {
        if($(this).children(":gt(4)").hide().length)
            $(this).append("<li class='showAll'>Show All</li>");
    });
    $(".showAll").live('click', function() {
        $(this).siblings().slideDown();
        $(this).remove();
    });
});​

Это скрывает всех детей над индексом 4, то есть показывает только 5 одновременно. Если она скрыта, она добавляет ссылку «Показать все» ... при нажатии на нее отображаются скрытые ссылки и сама ссылка «Показать все» удаляется.

Вы можете проверить, как это работает здесь: http://jsfiddle.net/hxrde/

Answer 2

Чарли,

Просто добавьте ": gt (4)" в функцию hideAll для братьев и сестер:

 $(".hideAll").live('click', function() {
    $(this).siblings(":gt(4)").slideUp();
    $(this).parent(0).append("<a class='showAll'>Show all</a>");
    $(this).remove();
});

И спасибо за код. Прекрасно работает!

Answer 3

$('#rssNews >li').slice(10).addClass("hidemore").hide();
if ($(".hidemore").length > 0) {
  //add your button to the dom here, 
  //and in its click event put:
  // $(".hidemore").show();
}