jQuery si quelque chose est plus que de la valeur puis masquer et ajouter un bouton pour montrer ce qui est caché?

Question

Exactement ce que dit mon titre est le problème que j'ai en ce moment. Je vérifie une div pour combien de liens php a imprimé et s'il y a plus de 10 Id aime les cacher et ajouter un bouton qui dit lire plus et ensuite montrer le reste des liens.

 $(document).ready(function() { 

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

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

}); 

    }); 

c'est à quel point j'ai obtenu avec le code. Je serai heureux d'entendre chaque astuce et truc que vous pouvez m'aider avec!

Cordialement,

Charlie

Answer 1

$('#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 2

Vous pouvez faire quelque chose assez simple comme ceci:

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

Ce cache des enfants sur indice 4, ce qui signifie qu'il montre seulement 5 à la fois . S'il en a caché, il ajoute un lien "Afficher tout" ... en cliquant sur ce lien, il affiche les liens cachés et supprime le lien "Afficher tout" lui-même.

Vous pouvez tester comment cela fonctionne ici: http://jsfiddle.net/hxrde/

Answer 3

Charlie,

Il suffit d'ajouter ": gt (4)" à la fonction HideAll pour les frères et soeurs:

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

Et merci pour le code. Fonctionne très bien!