JQuery, скрыть и показать элементы списка после n-го элемента

Скажем, у меня есть неупорядоченный список, например:

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

Как я, используя JQuery, скрою последние 2 элемента списка и добавлю ссылку "показать больше", поэтому при нажатии на них появятся последние 2 элемента списка?

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

Ответ 1

Попробуйте следующий пример кода:

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

Ответ 2

Для удовольствия, здесь окольный способ сделать это в одной цепочке:

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

Ответ 3

Я только хотел показать "show/hide", если больше max, поэтому я сделал это, следуя за Кеном:

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

Ответ 4

Это будет больше похоже на это. Вам нужно будет скрыть детей больше 2, потому что три индексируются как 2. Кроме того, если вы хотите поместить Show More в тег LI, вам нужно включить :not(:last-child) в свой селектор. Например:

<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

Следуя за Кеном и Клаудом, я добавил положение "Больше", чтобы перейти к "Меньше" и переключить соответствующие элементы списка.

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

Ответ 6

Вы можете попробовать Показать первые N элементов плагина jQuery. Все, что вам нужно написать, это следующее:

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

Он автоматически преобразуется в это:

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

И после нажатия кнопки "Показать больше" он преобразуется в это:

<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, я внес код в этот плагин.

Ответ 7

Я предполагаю, что вы начинаете с UL в соответствии с вашим примером кода.

Я бы нашел UL и спрятал элементы, превышающие индекс последнего элемента, который вы хотите отобразить на первый взгляд. Затем я бы добавил новый элемент, чтобы действовать как крючок для отображения остального. Наконец, я бы спрятал шоу больше, поскольку он больше не нужен.

См. следующее:

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