Выпадающее меню на JS
Создаю фокусированное выпадающее меню. Что-то мне удалось создать, но вылез баг. При фокусе элемента .select__output невозможно выбрать элементы, данный класс тут же теряет свой фокус. Как исправить?
function dropdown() {
const selectItem = document.querySelectorAll(".select__output");
selectItem.forEach((item, i) => {
item.addEventListener("focusin", (event) => {
const selectBody = document.querySelectorAll(".select__body");
selectBody[i].classList.toggle("show");
item.classList.toggle("shadow");
});
item.addEventListener("focusout", (event) => {
const selectBody = document.querySelectorAll(".select__body");
selectBody[i].classList.toggle("show");
item.classList.toggle("shadow");
});
});
}
dropdown();
.select {
width: 60%;
}
.select:not(:last-child) {
margin-right: 32px;
}
.selects__title {
font-weight: normal;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.02em;
color: #111111;
opacity: 0.8;
margin-bottom: 16px;
margin-left: 16px;
}
.select__item {
position: relative;
}
.select__output {
display: flex;
justify-content: space-between;
width: 100%;
height: 36px;
padding: 15px 16px;
background: #FFFFFF;
border: 2px solid rgba(125, 138, 253, 0.3);
border-radius: 4px;
cursor: pointer;
}
.shadow {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
.select__content {
font-weight: normal;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.02em;
color: #777;
opacity: 0.8;
}
.select__body {
position: absolute;
top: 64px;
left: 0;
width: 100%;
max-height: 379px;
padding: 24px 16px;
background: #FFFFFF;
border: 2px solid rgba(125, 138, 253, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
border-radius: 4px;
overflow-y: scroll;
z-index: 1;
}
.select-body__height {
height: 443px;
}
.select-body__list {
list-style: none;
}
.select-body__item:not(:last-child) {
margin-bottom: 16px;
}
.select-body__item:last-child {
margin-bottom: 20px;
}
.select__btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.select-btn__item {
background: #638FFF;
border-radius: 4px;
padding: 9px 63px;
border: none;
margin: 0 auto;
font-weight: bold;
line-height: 22px;
text-align: center;
color: #FFFFFF;
}
.hide {
display: none;
}
.show {
display: block;
}
<div class="select">
<p class="selects__title">Отрасль</p>
<div class="select__item">
<div class="select__output" tabindex="1">
<div class="select__content">Выбрать</div>
<img src="img/arrowSelect.svg" alt="arrow" class="select__arrow">
</div>
<div class="select__body hide">
<ul class="select-body__list">
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox01">
<label for="checkbox01" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox02">
<label for="checkbox02" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox03">
<label for="checkbox03" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox04">
<label for="checkbox04" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox05">
<label for="checkbox05" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox06">
<label for="checkbox06" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox07">
<label for="checkbox07" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox08">
<label for="checkbox08" class="label__checkbox">Дизайн</label>
</li>
</ul>
<div class="select__btn">
<input type="submit" value="Применить" class="select-btn__item">
</div>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: Pilaton
→ Ссылка
function dropdown() {
const selectItem = document.querySelectorAll(".select__output");
selectItem.forEach((item, i) => {
item.addEventListener("click", (event) => {
const selectBody = document.querySelectorAll(".select__body");
selectBody[i].classList.toggle("show");
item.classList.toggle("shadow");
});
});
}
dropdown();
.select {
width: 60%;
}
.select:not(:last-child) {
margin-right: 32px;
}
.selects__title {
font-weight: normal;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.02em;
color: #111111;
opacity: 0.8;
margin-bottom: 16px;
margin-left: 16px;
}
.select__item {
position: relative;
}
.select__output {
display: flex;
justify-content: space-between;
width: 100%;
height: 36px;
padding: 15px 16px;
background: #FFFFFF;
border: 2px solid rgba(125, 138, 253, 0.3);
border-radius: 4px;
cursor: pointer;
}
.shadow {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
.select__content {
font-weight: normal;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.02em;
color: #777;
opacity: 0.8;
}
.select__body {
position: absolute;
top: 64px;
left: 0;
width: 100%;
max-height: 379px;
padding: 24px 16px;
background: #FFFFFF;
border: 2px solid rgba(125, 138, 253, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.04);
border-radius: 4px;
overflow-y: scroll;
z-index: 1;
}
.select-body__height {
height: 443px;
}
.select-body__list {
list-style: none;
}
.select-body__item:not(:last-child) {
margin-bottom: 16px;
}
.select-body__item:last-child {
margin-bottom: 20px;
}
.select__btn {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.select-btn__item {
background: #638FFF;
border-radius: 4px;
padding: 9px 63px;
border: none;
margin: 0 auto;
font-weight: bold;
line-height: 22px;
text-align: center;
color: #FFFFFF;
}
.hide {
display: none;
}
.show {
display: block;
}
<div class="select">
<p class="selects__title">Отрасль</p>
<div class="select__item">
<div class="select__output" tabindex="1">
<div class="select__content">Выбрать</div>
<img src="img/arrowSelect.svg" alt="arrow" class="select__arrow">
</div>
<div class="select__body hide">
<ul class="select-body__list">
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox01">
<label for="checkbox01" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox02">
<label for="checkbox02" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox03">
<label for="checkbox03" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox04">
<label for="checkbox04" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox05">
<label for="checkbox05" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox06">
<label for="checkbox06" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox07">
<label for="checkbox07" class="label__checkbox">Дизайн</label>
</li>
<li class="select-body__item">
<input type="checkbox" class="checkbox" id="checkbox08">
<label for="checkbox08" class="label__checkbox">Дизайн</label>
</li>
</ul>
<div class="select__btn">
<input type="submit" value="Применить" class="select-btn__item">
</div>
</div>
</div>
</div>