Вы узнаете как закрывать элементы списка при помощи JavaScript.
Закрываемые элементы списка
Нажмите на символ "x" справа от элемента списка, чтобы закрыть/скрыть этот элемент.
- Анна
- Алексей×
- Борис×
- Жанна×
- Иван×
- Сергей×
- Светлана
Как сделать закрываемые элементы списка
Шаг 1) Добавляем HTML:
Пример
<ul>
<li>Анна</li>
<li>Алексей<span class="close">x</span></li>
<li>Борис<span class="close">x</span></li>
<li>Жанна<span class="close">x</span></li>
<li>Иван<span class="close">x</span></li>
<li>Сергей<span class="close">x</span></li>
<li>Светлана</li>
</ul>
Шаг 2) Добавляем CSS:
Пример
* {
box-sizing: border-box;
}
/* Стиль списка (убираем отступы и маркеры) */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Стили элементов списка */
ul li {
border: 1px solid #ddd;
margin-top: -1px; /* Убираем двойные границы */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
position: relative;
}
/* Добавляем светло-серый фон при наведении на элемент */
ul li:hover {
background-color: #eee;
}
/* Стили закрывающей кнопки */
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {
background: #bbb;
}
Шаг 3) Добавляем JavaScript:
Пример
// Получаем все элементы с классом "close" */
var closebtns = document.getElementsByClassName("close");
var i;
// Проходим по найденным элементам и устанавливаем обработчик события.
// Когда на элемент кликают мышкой, родительский элемент скрывается
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
