04.02.2022, 09:35
|
|
Кандидат Javascript-наук
|
|
Регистрация: 03.09.2012
Сообщений: 109
|
|
|
Раскрывающийся список без jQuery
Доброго времени суток, уважаемые специалисты.
На сайте используется адаптивная тема, если сайт отображается на мобильном, то список Возможно, вас заинтересует и Популярные статьи отображаются не полностью, часть скрывается и раскрывается полностью по клику.
Вот наглядно, как это выглядит https://jsfiddle.net/tn8qx0mz/
Использую для этого вот этот код:
jQuery(function() {
var t = jQuery('.ta'),
max, min = 600;
jQuery('.read-next').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad, .read-next").hide();
return false
})
})
jQuery(function() {
var t = jQuery('.ta2'),
max, min = 300;
jQuery('.read-next22').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad-2, .read-next22").hide();
return false
})
})
<style>
.ta2 {
height: 300px;
width: 100%;
transition: all 1s;
}
.ta {
height: 500px;
width: 100%;
transition: all 1s;
}
.read-next-grad,.read-next-grad-2 {
text-align: center;
position: relative;
width: 100%;
background: linear-gradient(to top,rgba(255,255,255,1) 0%,rgba(255,255,255,0));
margin-top: -50px;
height: 50px;
}
.read-next,.read-next22 {
text-align: center;
display: block;
padding-top: 20px;
font-weight: 700;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" id="jquery-js"></script>
<script>
jQuery(function() {
var t = jQuery('.ta'),
max, min = 600;
jQuery('.read-next').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad, .read-next").hide();
return false
})
})
jQuery(function() {
var t = jQuery('.ta2'),
max, min = 300;
jQuery('.read-next22').on('click', function(event) {
max = t[0].scrollHeight
var H = t.height();
t.height(H < max ? max : min);
jQuery(".read-next-grad-2, .read-next22").hide();
return false
})
})
</script>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts">
<p class="widget-title">Популярные статьи</p>
<div style="height:100%">
<div class="ta2" style="overflow:hidden;">
<ul class="wpp-list">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
</ul>
</div>
<div class="read-next-grad-2"></div><a class="read-next22" href="#">Раскрыть список...</a></div>
</aside> </div>
<br><br> И ещё вот этот блок <br><br>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts">
<p class="widget-title">Возможно, Вас заинтересует</p>
<div style="height:100%">
<div class="ta" style="overflow:hidden;">
<ul class="wpp-list" style="text-align:center;">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
</ul>
</div>
<div class="read-next-grad"></div><a class="read-next" href="#">Раскрыть список...</a></div>
</aside> </div>
Код самого блока, который раскрывается по нажатию.
на некоторых страницах помимо этого jQuery кода никакого другого нет, вот я и хочу отключить там добавление jQuery библиотеки. Но для этого требуется отказаться от выше приведённого кода. Какой будет код с данным функционалом на нативном JS?
Последний раз редактировалось 12345678, 04.02.2022 в 19:02.
|
|
04.02.2022, 10:28
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
12345678,
а можно минимум кода и здесь?
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
04.02.2022, 19:03
|
|
Кандидат Javascript-наук
|
|
Регистрация: 03.09.2012
Сообщений: 109
|
|
|
рони
Готово.
|
|
04.02.2022, 19:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
12345678,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.ta2 {
height: 300px;
width: 100%;
transition: all 1s;
}
.ta {
height: 500px;
width: 100%;
transition: all 1s;
}
.read-next-grad,
.read-next-grad-2 {
text-align: center;
position: relative;
width: 100%;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0));
margin-top: -50px;
height: 50px;
}
.read-next,
.read-next22 {
text-align: center;
display: block;
padding-top: 20px;
font-weight: 700;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let widgets = document.querySelectorAll("aside");
widgets.forEach(el => {
el.addEventListener("click", (event) => {
let target = event.target;
if (target = target.closest("aside > div > a")) {
event.preventDefault();
let div = el.querySelector("ul").parentNode;
div.style.height = `${div.scrollHeight}px`;
target.style.display = "none";
target.previousElementSibling.style.display = "none";
}
})
})
});
</script>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts">
<p class="widget-title">Популярные статьи</p>
<div style="height:100%">
<div class="ta2" style="overflow:hidden;">
<ul class="wpp-list">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
</ul>
</div>
<div class="read-next-grad-2"></div><a class="read-next22" href="#">Раскрыть список...</a></div>
</aside>
</div>
<br><br> И ещё вот этот блок <br><br>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts">
<p class="widget-title">Возможно, Вас заинтересует</p>
<div style="height:100%">
<div class="ta" style="overflow:hidden;">
<ul class="wpp-list" style="text-align:center;">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
</ul>
</div>
<div class="read-next-grad"></div><a class="read-next" href="#">Раскрыть список...</a></div>
</aside>
</div>
</body>
</html>
Последний раз редактировалось рони, 05.02.2022 в 08:19.
|
|
04.02.2022, 22:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 03.09.2012
Сообщений: 109
|
|
рони
Не работает, если убрать jQuery.
Скорее всего дело вот в этой строчке
div.style.height = `${div.scrollHeight}px`;
Значок доллара - это же jQuery. А именно этот фреймворк я и хочу убрать.
|
|
04.02.2022, 22:52
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,492
|
|
__________________
29375, 35
|
|
04.02.2022, 23:01
|
|
Кандидат Javascript-наук
|
|
Регистрация: 03.09.2012
Сообщений: 109
|
|
Виноват  Не сохранил файл просто, куда именно код JS добавил. Сейчас буду тестить.
Но я вот сразу заметил такой момент, что охватываются вообще все aside (а их на сайте много), это лишняя нагрузка на обработчик. Можно сузить этими двумя асайдами? Только сейчас заметил, что у обоих стиль widget_pl popular-posts, но вообще на реальном сайте другой стиль у другого асайда, а именно widget_pl more-posts). Которые сворачиваются в мобильной версии сайта посредством css, а остальные aside показываются как есть всегда, и их смысла нет охватывать.
Как правильно вписать охват только этих двух асайдов (с классами) в эту строчку
let widgets = document.querySelectorAll("aside");
Последний раз редактировалось 12345678, 04.02.2022 в 23:19.
|
|
04.02.2022, 23:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от 12345678
|
|
Можно сузить этими двумя асайдами?
|
что мешает присвоить свой класс один и тот же нужным секциям, блокам с контентом,
и свой класс нужным ссылкам и тени в этой секции.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.ta2 {
height: 300px;
width: 100%;
transition: all 1s;
}
.ta {
height: 500px;
width: 100%;
transition: all 1s;
}
.read-next-grad,
.read-next-grad-2 {
text-align: center;
position: relative;
width: 100%;
background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0));
margin-top: -50px;
height: 50px;
}
.read-next,
.read-next22 {
text-align: center;
display: block;
padding-top: 20px;
font-weight: 700;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let widgets = document.querySelectorAll("aside.block");
widgets.forEach(el => {
el.addEventListener("click", (event) => {
let target = event.target;
if (target = target.closest("a.btn")) {
event.preventDefault();
let div = el.querySelector(".content");
div.style.height = div.scrollHeight + "px";
target.style.display = "none";
let shadow = el.querySelector(".shadow");
shadow.style.display = "none";
}
})
})
});
</script>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts block">
<p class="widget-title">Популярные статьи</p>
<div style="height:100%">
<div class="ta2 content" style="overflow:hidden;">
<ul class="wpp-list">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" alt="Тест" class="wpp-thumbnail" width="60" height="40"><span class="wpp-post-title">Тест название статьи для блока популярных статей</span></a>
</li>
</ul>
</div>
<div class="read-next-grad-2 shadow"></div><a class="read-next22 btn" href="#">Раскрыть список...</a></div>
</aside>
</div>
<br><br> И ещё вот этот блок <br><br>
<div style="
display: flex;
">
<aside class="widget_pl popular-posts block">
<p class="widget-title">Возможно, Вас заинтересует</p>
<div style="height:100%">
<div class="ta content" style="overflow:hidden;">
<ul class="wpp-list" style="text-align:center;">
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
<li>
<a href="https://test.ru/" title="Тест"><img loading="lazy" src="https://www.fnordware.com/superpng/pnggrad16rgb.png" class="wpp-thumbnail2" width="180" height="135" alt="Тест">
<br><span class="wpp-post-title2">Тест название, тест, название, тест название, тест название</span></a>
</li>
</ul>
</div>
<div class="read-next-grad shadow"></div><a class="read-next btn" href="#">Раскрыть список...</a></div>
</aside>
</div>
</body>
</html>
|
|
04.02.2022, 23:52
|
|
Кандидат Javascript-наук
|
|
Регистрация: 03.09.2012
Сообщений: 109
|
|
|
рони, вы просто профи! Работает последний вариант идеально, точь в точь, как и на jQuery.
А вот в первом, просто для информации, если кликнуть на любую ссылку в блоке, то она исчезнет и блок раскроется.
|
|
05.02.2022, 08:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от 12345678
|
|
А вот в первом, просто для информации, если кликнуть на любую ссылку в блоке, то она исчезнет и блок раскроется.
|
исправлено строка 47 #4, но лучше использовать классы, чем местоположение элемента, которое может поменяться. |
|
|
|
