0

На разных страницах сайта есть списки разной длины от 5 до ~50 пунктов.
Списки оформлены в виде следующей конструкции:

<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
    <li>Холодильник Amana</li>
    <li>Холодильник Amica</li>
    <li>Холодильник Ardo</li>
    <li>Холодильник Artevino</li>
    <li>Холодильник Asko</li>
  </ul>
</div>

Необходимо с помощью скрипта, если пунктов списка на странице, например болеe 5 штук, то остальные прятать, а вместо них показывать надпись "Показать все". Нужно так же отображать весь список при нажатии на надпись "Показать все", а саму надпись убрать после клика по ней, т.к. она более будет не нужна (сворачивать список при повторном клике не требуется – одностороннее действие).

Возможно ли это реализовать с помощью JQuery? Если да, то подскажите, как должен выглядеть скрипт для решения этой задачи?

1 ответ 1

1

var $tdm = $('.tdm');

// Перебераем все .tdm
$tdm.each(function () {
  // Получаем все пункты li в .tdm
  var $item = $(this).find('li'),
      // С помощью фильтра выбираем все пункты, которые идут после пятого
      $item_target = $item.filter(function () {
        return $(this).index() > 4
      });
  
  // Создаём ссылку, по нажатию на которую будут показываться все пункты
  var $link = $('<a href="#all">Показать всё</a>').click(function () {
    // Показываем скрытые пункты
    $item_target.show();
    // Удаляем кнопку
    $(this).remove();
    // Блокируем все последущие действия ссылки
    return false;
  });

  // Скрываем пункты, которые идут после пятого и добавляем перед шестым пунктом ссылку, с помощью которой покажем скрытые пункты
  $item_target.hide().eq(0).before($link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
    <li>Холодильник Amana</li>
    <li>Холодильник Amica</li>
    <li>Холодильник Ardo</li>
    <li>Холодильник Artevino</li>
    <li>Холодильник Asko</li>
  </ul>
</div>
<br>
<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
  </ul>
</div>

UPDATA:

Есть вот такой вариант. Но он выглядит некрасиво.

var $tdm = $('.tdm');

// Перебераем все .tdm
$tdm.each(function () {
  // Получаем все пункты li в .tdm
  var $item = $(this).find('li'),
      // С помощью фильтра выбираем все пункты, которые идут после пятого
      $item_target = $item.filter(function () {
        return $(this).index() > 4
      });
  
  // Создаём ссылку, по нажатию на которую будут показываться все пункты
  var $link = $('<a href="#all">Показать всё</a>').click(function () {
    // Показываем скрытые пункты
    $item_target.slideDown("200");
    // Удаляем кнопку
    $(this).remove();
    // Блокируем все последущие действия ссылки
    return false;
  });

  // Скрываем пункты, которые идут после пятого и добавляем перед шестым пунктом ссылку, с помощью которой покажем скрытые пункты
  $item_target.hide().eq(0).before($link);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
    <li>Холодильник Amana</li>
    <li>Холодильник Amica</li>
    <li>Холодильник Ardo</li>
    <li>Холодильник Artevino</li>
    <li>Холодильник Asko</li>
  </ul>
</div>
<br>
<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
  </ul>
</div>

Или же нужно делать скрипт сложнее:

var $tdm = $('.tdm');

// Перебераем все .tdm
$tdm.each(function () {
  // Получаем все пункты li в .tdm
  var $item = $(this).find('li'),
      // Получаем ul
      $list = $(this).find('ul'),
      // С помощью фильтра выбираем все пункты, которые идут после пятого
      $item_target = $item.filter(function () {
        return $(this).index() > 4
      });
  
  // Создадим условия дл проверки: есть ли элементы после пятого
  if ($item_target.length) {
    // Создаём обёртку для пунктов и запихаем их туда
    var $item_targetWrap = $('<div class="listHide"></div>').hide().append($item_target).appendTo($list);
  
    // Создаём ссылку, по нажатию на которую будут показываться все пункты
    var $link = $('<a href="#all">Показать всё</a>').click(function () {
      // Показываем скрытые пункты
      $item_targetWrap.slideDown("200");
      // Удаляем кнопку
      $(this).remove();
      // Блокируем все последущие действия ссылки
      return false;
    }).insertAfter($item_targetWrap);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
    <li>Холодильник Amana</li>
    <li>Холодильник Amica</li>
    <li>Холодильник Ardo</li>
    <li>Холодильник Artevino</li>
    <li>Холодильник Asko</li>
  </ul>
</div>
<br>
<div class="tdm">
  <ul>
    <li>Холодильник AEG</li>
    <li>Холодильник ATLANT</li>
    <li>Холодильник AVEX</li>
    <li>Холодильник Akai</li>
  </ul>
</div>

6
  • Большое спасибо, что дали не только рабочее решение для моей задачи, но и подробно расписали как работает скрипт! Есть возможность разобраться и научится. Еще раз спасибо, все работает в соответствии с исходной задачей!!
    – Slava
    30 июл 2017 в 7:52
  • @Slava, не за что
    – Yuri
    30 июл 2017 в 7:54
  • Подскажите, а куда в Ваш скрипт добавить функцию .slideDown("200") ? Дело в том, что скрытых элементов в .tdm блоке получается очень много и когда они в раз по клику появляются как-бы разрывают страницу за приделы области экрана, что с эстетической точки зрения не красиво, сделать бы чтоб скрытые элементы по клику плавно появлялись, вообще бы было здорово.. В первоначальном вопросе не сформулировал эту задачу, так как не было необходимости.. Не смотря на ваши пояснения к скрипту не могу сам добавить эту функцию - не получается сколько не бьюсь - не хватает знаний.. Помогите пожалуйста
    – Slava
    13 авг 2017 в 0:39
  • @Slava, добавил
    – Yuri
    13 авг 2017 в 9:03
  • Самый последний вариант вообще шикарно - огромное спасибо, то что нужно! Где-то в глубине я понимал, что нужен блок для скрытых элементов который в вашем скрипте обозначен как <div class="listHide">, но как и куда его добавить, к сожалению не смог разобраться. Ну и конечно отдельное спасибо за пояснения к скрипту - отличная возможность постараться разобраться и научится )
    – Slava
    13 авг 2017 в 18:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.