Для кнопки пришлось добавить svg-стрелку, но по клику на неё дропдаун не работает, в консоли ошибка-"TypeError: ev.target.nextElementSibling is null". Как исправить код без использования свойства nextElementSibling?
document.querySelectorAll(".header__dropdown-link").forEach(el => {
el.addEventListener("click", (ev) => {
ev.preventDefault();
ev.stopPropagation();
fnCloseAllDropdown(ev.target.nextElementSibling);
ev.target.nextElementSibling.classList.toggle("_show");
});
});
document.addEventListener("click", (ev) => {
if (ev.target.closest("._show")) return;
ev.stopPropagation();
fnCloseAllDropdown();
});
function fnCloseAllDropdown(obj) {
document.querySelectorAll(".painting-style__dropdown").forEach(el => {
if (el != obj) {
el.classList.remove("_show");
}
});
}
.btn-reset {
padding: 0;
border: none;
cursor: pointer;
background: transparent;
}
.list-reset {
margin: 0;
padding: 0;
list-style: none;
}
.header__dropdown-link {
width: 100px;
height: 40px;
position: relative;
background: orange;
padding: 10px 20px;
color: #fff;
}
.painting-style__dropdown {
display: none;
position: absolute;
top: 48px;
padding: 10px;
width: 100px;
max-height: 300px;
background: #cacaca;
}
._show {
display: block;
}
<button class="btn-reset header__dropdown-link nav-hover-style nav-focus-style">Кнопка
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" stroke="white"/>
</svg>
</button>
<ul class="list-reset painting-style__dropdown" data-simplebar>
<li class="painting-style__dropdown-item"> <a class="link-reset painting-style__dropdown-link tintoretto"
href="#">Элемент 1</a> </li>
<li class="painting-style__dropdown-item"> <a class="link-reset painting-style__dropdown-link fridrikh"
href="#">Элемент 2</a> </li>
<li class="painting-style__dropdown-item"> <a class="link-reset painting-style__dropdown-link leonardo"
href="#">Элемент 3</a> </li>
<li class="painting-style__dropdown-item"> <a class="link-reset painting-style__dropdown-link verokeoy"
href="#">Элемент 4</a> </li>
</ul>