Подскажите пожалуйста, как выбрать пункт из всплывающего меню, чтобы остальные пункты скрывались, а выбранный оставался активным. По принципу тега select.
Я смог сделать только всплывающее меню.
Насколько понимаю, необходимо использовать метод this.
https://jsfiddle.net/cmfz7nwx/12/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="items">
<div class="select1 item active">001</div>
<div class="select2 item">002</div>
<div class="select3 item">003</div>
<div class="select4 item">004</div>
</div>
</body>
</html>
.item {
display: none;
cursor: pointer;
padding: 1rem;
margin: 0 0 0.5rem 0;
background: #ccc;
}
.item.active {
display: block;
}
let selectItems = document.querySelectorAll('.item');
let selectFirst = document.querySelector('.item:first-of-type');
function selectOpen() {
for (let selectItem of selectItems) {
selectItem.classList.add('active');
}
}
selectFirst.addEventListener('click', selectOpen);
