2

Здравствуйте. Имеется список с n-ным кол-вом пунктов. Как сделать так, чтобы показывались, например, первые 4 пункта, а остальные - по нажатию на кнопку (с возвращением в исходное положение при повторном нажатии), причем с привязкой именно к кол-ву пунктов, а не по заданной высоте.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
  <li>First item</li>
  <li>First item</li>
</ul>

<a href="#close" class="button">Show</a>

UPD: предложенные ниже варианты в целом отвечают на мой вопрос, но я хотел бы использовать для такого списка анимацию. К сожалению, сейчас она работает не совсем корректно (сворачивает/раскрывает по отдельности каждый пункт списка), может есть варианты как этого избежать? Ссылка на пример с анимацией в codepen. Кроме того, мне интересно, почему маркеры пунктов списков после раскрытия ul появляются не сразу.

$(function(){
  $('.show-hide-btn').click(function(){
    $('.last-changes-item:nth-child(n+5)').slideToggle('');
  });
});
.last-changes-block {
    margin-top: 30px;
}
.last-changes-list {
    margin: 0 0 0 17px;
    padding: 0;
    list-style: none;
}
.last-changes-list .last-changes-item {
    position: relative;
    margin-bottom: 15px;
    line-height: 15px;
}
.last-changes-list .last-changes-item:nth-of-type(n+5) {
    display: none;
}
.last-changes-list .last-changes-item:before {
    content: '';
    position: absolute;
    top: 5px;
    left: -16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333;
}
.last-changes-item .date {
    margin-left: 12px;
    font-family: 'Droid Serif';
    font-size: 13px;
    font-style: italic;
    color: #999;
    white-space: nowrap;
}
.show-hide-btn,
.show-hide-btn1 {
    display: inline-flex;
    align-items: center;
    height: 29px;
    font-family: 'Roboto Slab';
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.show-hide-btn:hover,
.show-hide-btn1:hover {
    background: #FBBC25;
    color: #333;
}
.show-hide-btn .fa,
.show-hide-btn1 .fa {
    margin-left: 5px;
    font-size: 13px;
}
.last-changes-item:nth-child(n+5) {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="last-changes-block">
  <ul class="last-changes-list visible-last-changes">
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.24.0</strong> for Android 4.1</span>
      <span class="date">Nov. 21, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.22.1</strong> for Android 4.1</span>
      <span class="date">Nov. 14, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.22.0</strong> for Android 4.1</span>
      <span class="date">Nov. 9, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.20.0</strong> for Android 4.1</span>
      <span class="date">Nov. 6, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.24.0</strong> for Android 4.1</span>
      <span class="date">Nov. 21, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.22.1</strong> for Android 4.1</span>
      <span class="date">Nov. 14, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.22.0</strong> for Android 4.1</span>
      <span class="date">Nov. 9, 2016</span>
    </li>
    <li class="last-changes-item">
      <span class="title">Twitter <strong>v.6.20.0</strong> for Android 4.1</span>
      <span class="date">Nov. 6, 2016</span>
    </li>
  </ul>
  <a class="show-hide-btn">
    <span>Show more</span>
    <i class="fa fa-chevron-down" aria-hidden="true"></i>
  </a>
</div>

4 ответа 4

4

Как вариант, без добавления лишней разметки в HTML:

$(function(){
  $('.list-toggle').click(function(){
    $('.u-list').toggleClass('open');
  });
});
.u-list li:nth-child(n+5) {
  display: none;
}

.u-list.open li:nth-child(n+5) {
  display: list-item;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="list-toggle">Toggle!</button>
<ul class="u-list">
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

2

Вот вариант с анимацией

var ul = $('.content ul');
var height = $('.content ul').height();
$('.button').on('click', function() {
    if (ul.css('height') == '60px') {
      $(this).text('Hide');
      ul.animate({height: height + "px"}, 300);
    } else {
      $(this).text('Show');
      ul.animate({height: "60px"}, 300);
    }
  })

и style="overflow: hidden;" для элемента <ul>

https://jsfiddle.net/j7ahj2f1/

1

$('.button').on('click', function(){
  $('.toggle').toggle();
})
.toggle{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li class="toggle">Fifth item</li>
  <li class="toggle">First item</li>
  <li class="toggle">First item</li>
</ul>

<a href="#close" class="button">Show</a>

Будут прятаться все с классом который укажете.

1

Решение без модификации разметки, css, только средствами jQuery, с вариативным(изменяемым) шагом вывода, проверено:

var i = 0;
var object = '.content ul li'; //Искомый объект, класс 'content' настраиваете под свой/убираете
var count = $(object).length; //Кол-во искомых объектов
$('.button').off('click'); //Отбиндим предыдущие функции(опционально)
$('.button').on('click',function(){
    if(i >= count){
        $(object).show();
        i = 0;
        return false; //выйдем из функции, при ее сбросе
    }
    var delimiter = i + 4; //вычислим индекс следующего "последнего элемента"
    $(object).hide(); //спрячем все объекты
    while(i < delimiter){
        $(object).eq(i).show();//покажем только нужные
    }
})
$('.button').trigger('click');//"Костыль", если нужно по умолчанию сначала выводить только первые 4 записи.
2
  • Благодарю за ответ. Я плохо разбираюсь в jquery/js, но в кодпен Ваш вариант, к сожалению, не работает - в скрипте находит бесконечный цикл codepen.io/Vlastelin/pen/MbVjxK?editors=1010
    – Игорь
    5 дек 2016 в 13:56
  • @Игорь, да, при попытке внесения фикса, случайно поломал; вот рабочий pencode
    – SLy_huh
    5 дек 2016 в 14:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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