JQuery, verstecken und zeigen Listenelemente nach n-ten Element

Question

Sagen, ich habe eine ungeordnete Liste, etwa so:

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

Wie würde ich, JQuery verwenden, blenden Sie die letzten 2 Listenelemente und haben eine ‚zeige mehr‘ Link dort, also, wenn geklickt, die letzten 2 Listenelemente würden erscheinen?

<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

Versuchen Sie das folgende Codebeispiel:

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

Answer 2

Ich gehe davon aus, dass Sie mit dem UL nach Ihrem Beispielcode beginnen.

Ich würde die UL finden und Elemente ausblenden, die größer sind als der Index des letzten Elements, das Sie ursprünglich anzeigen möchten. Dann würde ich einen neuen Gegenstand hinzufügen, der als ein Haken dient, um den Rest anzuzeigen. Schließlich versteckte ich die Show mehr Option, da es nicht mehr benötigt wurde.

Siehe folgendes:

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

Answer 3

Für Spaß, hier ist ein Umwegen es in einer Kette zu tun:

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

Answer 4

Es eher wie dieses wäre. Sie müssten die Kinder über 2 verbergen, da Three als 2 indiziert wird. Wenn Sie die Show More in ein LI-Tag einfügen möchten, müssen Sie :not(:last-child) in Ihrem Selektor einschließen. Wie so:

<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

ich nur das "Ein-/Ausblenden", wenn mehr als max zeigen wollte, so tue ich dies, nach 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

Im Anschluss an Ken und Wolke, fügte ich vorgesehen Klicken Sie auf die Schaltfläche "Mehr", um zu "Weniger" zu wechseln und die relevanten Listenelemente umzuschalten.

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

Sie können versuchen, die Show First N Items jQuery Plugin. Es

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

automatisch konvertieren dies: das alles, was Sie schreiben müssen, ist

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

Und nach dem Klicken auf Show More, wird es auf diese konvertieren:

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

Fyi, Ich habe Code zu diesem Plugin beigetragen.