Показать сообщение отдельно
  #4 (permalink)  
Старый 08.12.2023, 18:13
slm slm вне форума
Новичок на форуме
Отправить личное сообщение для slm Посмотреть профиль Найти все сообщения от slm
 
Регистрация: 08.12.2023
Сообщений: 4

Да, действительно лучше целиком представить,а то получилось как то не так.
Вот с вашим кодом, но не заработало:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="charset" content="utf-8">
<title>Тест</title>
<style>
.item1:nth-child(n+7) {display: none;}
.item2:nth-child(n+6) {display: none;}
.item1.active, .item2.active { display: block !important;}
</style>

</head>
<body>
<section id="id-1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="more"></div>
</section>


<section id="id-2">
<div class="item2">1</div>
<div class="item2">2</div>
<div class="item2">3</div>
<div class="item2">4</div>
<div class="item2">5</div>
<div class="item2">6</div>
<div class="item2">7</div>
<div class="item2">8</div>
<div class="more"></div>
</section>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
//
function test(a, n) {
	const c = a.join(' ')
	if ($(c).length <= n) return
	const o = $('.more')
	o.append( '<div>more</div>' );
	o.click(function () {
		$(с).addClass('active');
		o.text( "" );
	})
}
test(['#id-1', '.item1'], 6)
test(['#id-2', '.item2'], 5)

</script>
</body>
</html>
Ответить с цитированием