Показать сообщение отдельно
  #9 (permalink)  
Старый 13.01.2019, 09:01
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Я бы хотел обратить внимание на ваш HTML-код. Чтобы вам добавить/удалить/вставить новую пару, состоящую из заголовка и описания, придётся менять в двух местах. Притом придётся учитывать позицию элементов в списке. Это очень сложное дело! Вы можете запутаться и вам придется проверять весь список! Почему бы заголовок и описание не хранить рядом?

Я уменьшил ваш JavaScript путём использования анимации CSS. Также была добавлена поддержка для клавиатуры и сенсорных экранов.

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<style>
			
			#facts {
				display: grid;
			}
			
			#facts dt {
				display: list-item;
				margin-left: 2.5em;
				cursor: default;
			}
			
			#facts dt:hover + dd, 
			#facts dt:focus + dd {
				opacity: 1;
			}
			
			#facts dd {
				order: 1;
				border: 2px solid #b463b2;
				background: #eee;
				padding: 1em;
				opacity: 0;
				transition: opacity 500ms;
				grid-row-end: 9999;
				grid-column: 1 / -1;
				pointer-events: none;
				align-self: start;
			}
			
		</style>
	</head>
	<body>
		<dl id="facts">
			<dt>Впечатляющий стаж работы</dt>
			<dd>
				Более 11 лет мы работаем с клиентами в текстильной индустрии,
				каждый год подтверждая свой профессионализм.
			</dd>
			
			<dt>Эксклюзивный дизайн</dt>
			<dd>
				С вами работает персональный дизайнер, индивидуально
				разрабатывая модели только под ваш интерьер.
			</dd>
			
			<dt>Гарантии качества</dt>
			<dd>
				Размещая заказ у нас, вы получаете комплект официальных
				документов, являющихся для вас юридической гарантией качества
				нашей работы.
			</dd>
			
			<dt>Собственное производство</dt>
			<dd>
				Каждое изделие изготавливается по индивидуальному лекалу
				по европейским стандартам, под тщательным руководством
				опытного технолога.
			</dd>
			
			<dt>Оперативная работа онлайн</dt>
			<dd>
				Мы экономим ваше время! Принимайте решения, согласовывайте
				дизайн штор и текстиль в онлайн-режиме не отрываясь
				от своих дел.
			</dd>
			
			<dt>Выезд к клиенту</dt>
			<dd>
				Мы заботимся о вашем комфорте, поэтому наши специалисты
				приедут к вам на встречу в любую точку Москвы
				и Московской области.
			</dd>
			
			<dt>Изделия под ключ</dt>
			<dd>
				Мы оказываем комплексное текстильное оформление, начиная
				от замера и заканчивая установкой готовых изделий.
			</dd>
		</dl>
		<script>
		
			for(const element of document.querySelectorAll("#facts dt"))
				element.tabIndex = 0;
		
		</script>
	</body>
</html>


Вместо тройки элементов (dl, dt, dd) можно использовать, например, (section, h2, p)

Последний раз редактировалось Malleys, 13.01.2019 в 09:07.
Ответить с цитированием