Содержание
Задача. На сайте есть блок с плиткой тегов, который имеет на разных страницах различное количество элементов. Когда этих элементов много и они не помещаются в одну строку, нужно под блоком добавить кнопу «развернуть-свернуть» — Пример 1 и 2.
jQuery— набор функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. Разработка jQuery ведётся командой добровольцев на пожертвования.
HTML был одной из первых вещей, которую Джон Резиг освоил, когда он только начал заниматься программированием. Резиг программировал на QBasic, когда один его знакомый показал ему, как создать веб-страницу (используя Angelfire), а также основы HTML. Отец подарил ему на Рождество две книги по HTML. Именно тогда, когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень заинтересовали его.
Развернуть-Свернуть контент на jQuery
Решение 1. Для решения проблемы можно использовать Код №1. Данным скриптом можно развернуть-свернуть текст, блок или любой элемент из HTML, который можно как-то выбрать. Можно скрыть-показать блок полностью, если задать closeHeight = '0' . Если нужно чтобы кнопка «Развернуть» была всегда, то можно вынести содержимое из конструкции if(){}, а само условие удалить.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!-- CSS --> <style> /* Необходимые стили для работы скрипта */ #tags-tiles { overflow: hidden; } .more-link { display: block; width: 100%; padding: 8px; text-align: center; text-decoration: none; } .more-link:after { content: "\2193"; margin-left: 8px; font-size: .8em; } .more-link.open:after { content: "\2191"; } </style> <!-- HTML --> <div id="tags-tiles"> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Wordpress</a></li> <li><a href="#">Woocommerce</a></li> <li><a href="#">Programming</a></li> <li><a href="#">Web</a></li> <li><a href="#">...</a></li> </div> <div> <p><b>jQuery</b> — набор функций ....</p> </div> <!-- JS, jQuery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Подключаем jQuery, если нет --> <script> // Скрипт свернуть развернуть элемент $(document).ready(function() { var closeHeight = '80px'; // Высота блока в свернутом виде var moreText = 'Развернуть'; var lessText = 'Свернуть'; var duration = '1500'; // Продолжительность анимации var easing = 'linear'; var collapsElement = '#tags-tiles'; // Идентификатор или класс элемента, который будет сворачиваться var current = $(collapsElement); // Получаем элемент, который будет сворачиваться // Если элемент больше нужной высоты, то добавляем Развернуть/Свернуть if (current.height() > parseInt(closeHeight)){ current.data('fullHeight', current.height()).css('height', closeHeight); current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>'); var openSlider = function() { link = $(this); var openHeight = link.prev(collapsElement).data('fullHeight') + 'px'; link.prev(collapsElement).animate({'height': openHeight}, {duration: duration }, easing); link.text(lessText).addClass('open').removeClass('closed'); link.unbind('click', openSlider); link.bind('click', closeSlider); } var closeSlider = function() { link = $(this); link.prev(collapsElement).animate({'height': closeHeight}, {duration: duration }, easing); link.text(moreText).addClass('closed').removeClass('open'); link.unbind('click'); link.bind('click', openSlider); } $('.more-link').bind('click', openSlider); } }); /* При использовании jQuery в Wordpress, если есть ошибки - лучше сам скрипт обернуть в */ jQuery.noConflict(); jQuery(document).ready(function($) { /* тут jQuery код: $(document).ready(function() {... */ }); /* или заменить "$" на "jQuery" */. </script> |
Развернуть-Свернуть контент на jQuery для множества элементов
Решение 2. Подобная необходимость развернуть текст может быть на странице с выводом каких-то постов, карточек, где есть длинный текст и его нужно частично скрыть под кат, добавив кнопку вроде «Читать ещё». В этом случае лучше использовать Код №2 в Codepen. В принципе, первый скрипт оттуда и был взят.
Развернуть-свернуть блок на Javascript
Решение 3. В Коде №3 функция которая принимает элемент, который нужно свернуть и высоту в пикселях при которой будет срабатывать скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script>/* Функция Развернуть-свернуть блок selector на высоту maxHeight */ function qfursCollapseExpandBlock(selector, maxHeight) { const contentExpand = document.querySelector(selector); if (!contentExpand) return; // Если элемент не найден, прекращаем выполнение // Проверяем, превышает ли контент maxHeight if (contentExpand.scrollHeight > maxHeight) { // Устанавливаем начальную высоту через inline-стили contentExpand.style.maxHeight = maxHeight + "px"; contentExpand.style.overflow = "hidden"; contentExpand.style.transition = "max-height 0.5s ease"; // Создаем обертку и кнопку для разворачивания / сворачивания const buttonWrap = document.createElement("div"); const button = document.createElement("div"); buttonWrap.classList.add("content-expand"); button.classList.add("toggle-btn"); button.textContent = "Развернуть"; buttonWrap.append(button); contentExpand.after(buttonWrap); // Добавляем обработчик клика для разворачивания/сворачивания button.addEventListener("click", function() { // Проверяем, развернут ли контент if (contentExpand.style.maxHeight === "none") { // Сворачиваем contentExpand.style.maxHeight = maxHeight + "px"; button.textContent = "Развернуть"; } else { // Разворачиваем contentExpand.style.maxHeight = "none"; button.textContent = "Свернуть"; } contentExpand.classList.toggle("expanded"); }); } } // Инициализация qfursCollapseExpandBlock(".page__description", 95);</script> <style> .content-expand { position: relative; padding: 70px 15px 15px; margin-top: -70px; text-align: center; background: linear-gradient(0deg, #000 40%, #00000061); z-index: 100; } .expanded + .content-expand { padding-top: 15px; margin-top: 0; } .toggle-btn { display: inline-block; padding: 15px 5px 5px; border-bottom: 1px dashed; cursor: pointer; transition: 0.3s; } .toggle-btn:hover {color: red;} </style> |
Развернуть-Скрыть список на JS
Решение 4. Код №4 рассчитан на множество элементов списка. Там мы получаем все нужные списки и в каждом оставляем видимыми только нужное количество пунктов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!-- CSS --> <style> .pr_catalog_list li { display: none; } .pr_catalog_list li.visible { display: list-item; } .show-more { cursor: pointer; color: var(--wd-link-color); } </style> <!-- HTML --> <div class="pr_catalog_list"> <p>List 1</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> </ul> </div> <div class="pr_catalog_list"> <p>List 2</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> </ul> </div> <div class="pr_catalog_list"> <p>List 3</p> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> </ul> </div> <!-- JS --> <script> document.addEventListener('DOMContentLoaded', function() { const maxItems = 4; const textDisplayMore = 'Показать ещё...'; const textRollUp = 'Свернуть'; const catLists = document.querySelectorAll('.pr_catalog_list ul'); catLists.forEach(function(list) { const items = list.querySelectorAll('li'); const showMore = document.createElement('span'); showMore.textContent = textDisplayMore; showMore.classList.add('show-more'); if (items.length > maxItems) { for (let i = 0; i < maxItems; i++) { items[i].classList.add('visible'); } list.appendChild(showMore); } showMore.addEventListener('click', function() { if (showMore.textContent === textDisplayMore) { items.forEach(function(item) { item.classList.add('visible'); }); showMore.textContent = textRollUp; } else { for (let i = maxItems; i < items.length; i++) { items[i].classList.remove('visible'); } showMore.textContent = textDisplayMore; } }); }); }); </script> |
Смотреть в Codepen.