web-dev-qa-db-fra.com

Jquery, masquer et afficher les éléments de la liste après le nième élément

Disons que j'ai une liste non ordonnée, comme ceci:

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

Comment pourrais-je, à l'aide de JQuery, masquer les 2 derniers éléments de la liste et y avoir un lien "afficher plus", donc lorsque vous cliquez dessus, les 2 derniers éléments de la liste apparaissent?

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li style="display:none;">Four</li>
   <li style="display:none;">Five</li>
   <li>Show More</li>
</ul>
javascriptjqueryhidetoggle
25
Keith Donegan

Essayez l'exemple de code suivant:

$('ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('ul li:gt(3)').show();
});
35
pex

Pour le plaisir, voici une façon détournée de le faire en une seule chaîne:

$('ul')
  .find('li:gt(3)')
  .hide()
  .end()
  .append(
    $('<li>Show More...</li>').click( function(){
      $(this).siblings(':hidden').show().end().remove();
    })
);
17
Ken Redler

Je voulais seulement montrer le "show/hide" s'il était supérieur à max, donc je l'ai fait, en suivant Ken:

$('ul').each(function(){
  var max = 6
  if ($(this).find("li").length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
      .append(
        $('<li>More...</li>').click( function(){
          $(this).siblings(':hidden').show().end().remove();
        })
    );
  }
});
12
CloudMagick

Ce serait plus comme ça. Vous devez masquer les enfants supérieurs à 2, car Three est indexé comme 2. De plus, si vous souhaitez mettre le Show More dans une balise LI, vous devez inclure :not(:last-child) dans votre sélecteur. Ainsi:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a href=# class=show>Show More</a></li>
</ul>
<script>$("li:gt(2):not(:last-child)").hide();
$('.show').click(function(){
$("li:gt(2)").show();
});
</script>
5
bozdoz

Vous pouvez essayer le Afficher les premiers N éléments Plugin jQuery . Tout ce que vous devez écrire est le suivant:

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Il se convertira automatiquement en ceci:

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: none;">Four</li>
    <li style="display: none;">Five</li>
</ul>

Et après avoir cliqué sur Afficher plus, il se convertira en ceci:

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: list-item;">Four</li>
    <li style="display: list-item;">Five</li>
</ul>

Pour info, j'ai contribué au code de ce plugin.

3
Eric Broder

Après Ken et Cloud, j'ai ajouté une disposition pour que le bouton "Plus" se transforme en "Moins" et permute les éléments de liste pertinents.

$('.nav_accordian').each(function(){
    var max = 6
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});
2
Robert Waddell

Je suppose que vous commencez par l'UL selon votre exemple de code.

Je trouverais l'UL et cacherais les éléments supérieurs à l'index du dernier élément que vous souhaitez afficher initialement. Ensuite, j'ajouterais un nouvel élément pour servir de crochet pour afficher le reste. Enfin, je cacherais l'option Afficher plus car elle n'était plus nécessaire.

Voir ce qui suit:

$('ul li:gt(3)')
.hide()
.parent()
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>');
1
Brian Scott