jQuery, wenn etwas mehr als Wert ist dann ausblenden und fügen Sie eine Schaltfläche zu zeigen, was versteckt?

Question

Genau das, was mein Titel sagt, ist das Problem, das ich gerade habe.

Ich überprüfe ein Div für wie viele Links php gedruckt und wenn es mehr als 10 Id möchte sie ausblenden und fügen Sie eine Schaltfläche, die sagt, lesen Sie mehr und dann es zeigen den Rest der Links.

        $(document).ready(function() {

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

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

});

    });

So weit bin ich mit dem Code gekommen.

Ich freue mich über jeden Tipp und Trick, mit dem ihr mir helfen könnt!

Mit freundlichen Grüßen,

Charlie

Answer 1

Sie könnten etwas recht Einfaches wie das Folgende tun:

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

Dadurch werden alle Kinder über Index 4 ausgeblendet, d. h. es werden nur 5 auf einmal angezeigt. Wenn sie welche ausgeblendet hat, fügt sie einen Link "Alle anzeigen" hinzu... wenn Sie darauf klicken, werden die ausgeblendeten angezeigt und der Link "Alle anzeigen" selbst wird entfernt.

Wie das funktioniert, können Sie hier testen: http://jsfiddle.net/hxrde/

Answer 2

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

Answer 3

Charlie,

Fügen Sie einfach das ":gt(4)" in die Funktion hideAll für die Geschwister ein:

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

Und danke für den Code. Funktioniert super!