Как сделать появление скрытых тегов?

Question

[drtvader]

Привет всем! Есть такая разметка, необходимо, что бы отображалось в одной строке максимальное количество li и строчка заканчивалась ссылкой Ещё, при клике на ссылку Ещё показывались li, которые не поместились в одну строку.

<div class="b-tag">
      <ul class="b-tag__list short-text">
         <li id="1" class="b-tag__item">
            <a link="javascript:void(0);" title="" class="b-tag__link">1</a>
         </li>
         <li id="2" class="b-tag__item">
            <a link="javascript:void(0);" title="" class="b-tag__link"2</a>
         </li>
         <li id="3" class="b-tag__item">
            <a link="javascript:void(0);" title="" class="b-tag__link">3</a>
         </li>
         <li id="4" class="b-tag__item">
            <a link="javascript:void(0);" title="" class="b-tag__link">4</a>
        </li>
        <li id="5" class="b-tag__item">
            <a link="javascript:void(0);" title="" class="b-tag__link">5</a>
        </li>
        <li class="b-tag__item b-tag__item--more">
            <a link="javascript:void(0);" title="" class="b-tag__link b-tag__link--more">Еще</a>
        </li>
      </ul>      
    </div>

Answer 1

[Денис]

Какой-то у вас загадочный атрибут "link" в ссылках. Или же вы что-то перепутали, или это из HTML7 :)
Смотрим пример в песочнице

var perPage = 3, // кол-во элементов открывать по клику
    offset = 0,
    listBox = document.querySelector('.b-tag'),
    list = listBox.querySelector('.b-tag__list'),
    listItems = [].slice.call(list.querySelectorAll('li')),
    listCnt = listItems.length,
    moreBut = document.createElement('a');
moreBut.className = 'b-tag__link b-tag__link--more';
moreBut.textContent = 'Еще';
listBox.appendChild(moreBut);

moreBut.addEventListener('click', function(e) {
    e.preventDefault();
    listItems.slice(offset, (offset = perPage + offset)).forEach(function(li) {
        li.style.display = 'list-item';
    });
    if (offset >= listCnt) {
        this.style.display = 'none';
    }
}, false);
moreBut.click();

Comments

[drtvader]

да, точно!) в миксине так прописал случайно)