Jquery, nascondere e oggetti Mostra elenco dopo l'articolo ennesima

Question

Dire che ho una lista non ordinata, in questo modo:

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

Come potrei, utilizzando jQuery, nascondere le ultime 2 voci di elenco e hanno un 'mostrare piu' link lì, quindi quando cliccato sopra, gli ultimi 2 elementi della lista apparirebbero?

<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> 

Answer 1

provare il seguente esempio di codice:

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

Answer 2

Sto assumendo che si inizia con l'UL secondo il vostro codice di esempio.

Vorrei trovare UL e nascondere gli elementi più grande dell'indice dell'ultimo elemento che si desidera visualizzare inizialmente. Quindi aggiungerei un nuovo elemento per fungere da gancio per visualizzare il resto. Infine, avrei nascosto lo spettacolo più opzione in quanto non era più necessario.

vedere il seguente:

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

Answer 3

Per divertimento, ecco un modo indiretto per farlo in una catena:

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

Answer 4

Sarebbe più come questo. Dovresti nascondere i bambini maggiori di 2, perché Tre è indicizzato come 2. Inoltre, se si desidera inserire Show More in un tag LI, è necessario includere :not(:last-child) nel selettore. In questo modo:

<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> 

Answer 5

Ho solo voluto mostrare la "Mostra/Nascondi" se maggiore di max, così ho fatto questo, a seguito di 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(); 
     }) 
    ); 
    } 
}); 

Answer 6

Dopo Ken e Cloud, ho aggiunto fondo il pulsante "Altro" per passare a "Meno" e alternare le voci di elenco pertinenti.

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

Answer 7

Puoi provare il Show First N Items jQuery Plugin. Tutto ciò che serve per scrivere è questo:

<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> 

Si converte automaticamente a questo:

<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> 

E dopo aver fatto clic Show More, verrà convertito a questo:

<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> 

Cordiali saluti, Ho contribuito al codice di questo plugin.