Jquery, ẩn & mục danh sách chương trình sau khi mục thứ n

Question

Nói rằng tôi có một danh sách không có thứ tự, như vậy:

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

Làm thế nào tôi, sử dụng JQuery, ẩn 2 mục danh sách cuối cùng và có một 'hiển thị nhiều hơn' liên kết ở đó, vì vậy khi được nhấp vào, 2 mục danh sách cuối cùng sẽ xuất hiện?

<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

Hãy thử ví dụ đoạn mã sau:

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

Answer 2

Tôi giả định rằng bạn đang bắt đầu với UL theo mã ví dụ của bạn.

Tôi sẽ tìm thấy mục UL và ẩn lớn hơn chỉ mục của mục cuối cùng bạn muốn hiển thị ban đầu. Sau đó, tôi sẽ thêm một mục mới để hoạt động như một cái móc để hiển thị phần còn lại. Cuối cùng, tôi sẽ ẩn tùy chọn hiển thị nhiều hơn vì nó không còn cần thiết nữa.

Xem sau:

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

Answer 3

Đối với niềm vui, đây là một cách vòng xoay để làm điều đó trong một chuỗi:

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

Answer 4

Nó sẽ là như thế này. Bạn sẽ phải ẩn các trẻ em lớn hơn 2, bởi vì Ba được lập chỉ mục là 2. Ngoài ra, nếu bạn muốn đặt thẻ Show More in an LI, bạn sẽ cần phải bao gồm :not(:last-child) trong bộ chọn của bạn. Cũng giống như vậy:

<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

Tôi chỉ muốn chứng tỏ sự "hiển thị/ẩn" nếu lớn hơn max, vì vậy tôi đã làm điều này, sau 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

Tiếp theo Ken và Cloud, tôi đã thêm dự phòng nút "Thêm" để chuyển sang "Ít" hơn và chuyển đổi các mục danh sách có liên quan.

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

Bạn có thể thử số Show First N Items jQuery Plugin. Tất cả các bạn cần phải viết là:

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

Nó sẽ tự động chuyển đổi sang này:

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

Và sau khi nhấp Hiện hơn, nó sẽ chuyển đổi như sau:

<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, Tôi đã đóng góp mã cho plugin này.