Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.02.2022, 09:35
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 04.02.2022, 10:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

12345678,
а можно минимум кода и здесь?
например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 04.02.2022, 19:03
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони
Готово.
Ответить с цитированием
  #4 (permalink)  
Старый 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.
Ответить с цитированием
  #5 (permalink)  
Старый 04.02.2022, 22:45
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони
Не работает, если убрать jQuery.

Скорее всего дело вот в этой строчке
div.style.height = `${div.scrollHeight}px`;
Значок доллара - это же jQuery. А именно этот фреймворк я и хочу убрать.
Ответить с цитированием
  #6 (permalink)  
Старый 04.02.2022, 22:52
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,490

12345678,
https://learn.javascript.ru/es-string#stroki-shablony
__________________
29375, 35
Ответить с цитированием
  #7 (permalink)  
Старый 04.02.2022, 23:01
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 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.
Ответить с цитированием
  #8 (permalink)  
Старый 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>
Ответить с цитированием
  #9 (permalink)  
Старый 04.02.2022, 23:52
Кандидат Javascript-наук
Отправить личное сообщение для 12345678 Посмотреть профиль Найти все сообщения от 12345678
 
Регистрация: 03.09.2012
Сообщений: 109

рони, вы просто профи! Работает последний вариант идеально, точь в точь, как и на jQuery.

А вот в первом, просто для информации, если кликнуть на любую ссылку в блоке, то она исчезнет и блок раскроется.
Ответить с цитированием
  #10 (permalink)  
Старый 05.02.2022, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от 12345678
А вот в первом, просто для информации, если кликнуть на любую ссылку в блоке, то она исчезнет и блок раскроется.
исправлено строка 47 #4, но лучше использовать классы, чем местоположение элемента, которое может поменяться.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
получить и вставить данные из тега без jQuery ninja2 Общие вопросы Javascript 3 16.08.2015 12:03
Получить данные JSON без jQUERY strongest Javascript под браузер 17 19.01.2014 20:07
как сделать tooltip без jQuery CrossFire Элементы интерфейса 2 18.11.2013 02:29
как правильно прочесть xml без подключения jQuery BorodinKO Общие вопросы Javascript 1 03.04.2011 23:23
Каскадный список + jquery 1.4.2 bobo123456 jQuery 0 02.04.2010 21:59