Скрытие дропдауна по клику вне его

Question

document.querySelectorAll(".header__dropdown-link").forEach(item => {
  item.addEventListener("click", () => {
    const list = event.target.nextElementSibling;
    list.classList.toggle("painting-style__dropdown_show")
    event.preventDefault();
     if (!list) {
       e.stopPropagation();
     }

  })
})

.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

.painting-style__list {
  display: flex;
}

.painting-style__list-item {
margin-right: 50px;
}

.painting-style__dropdown {
  display: none;
  position: absolute;
  top: 48px;
  padding: 40px;
  width: 200px;
  height: 200px;
  background: #e5e5e5;
}

.painting-style__dropdown_show {
  display: block;
}

<ul class="list-reset painting-style__list">
  <li class="painting-style__list-item">
    <a class="link-reset header__dropdown-link" href="">Пункт меню 1</a>
    <ul class="list-reset painting-style__dropdown">
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link tintoretto" href="">Подпункт</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link fridrikh" href="">Подпункт</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link leonardo" href="">Подпункт</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link verokeoy" href="">Подпункт</a>
      </li>
    </ul>
  </li>
  <li class="painting-style__list-item">
    <a class="link-reset header__dropdown-link" href="">Пункт меню 2</a>
    <ul class="list-reset painting-style__dropdown">
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link tintoretto" href="">Подпункт</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link fridrikh" href="">Подпункт</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link leonardo" href="">Подпункт</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link verokeoy" href="">Подпункт</a>
      </li>
    </ul>
  </li>

Есть такой код-открытие - закрытие меню по клику, пытаюст реализовать его закрытие по клику вне его, но что-то делаю не так

document.querySelectorAll(".header__dropdown-link").forEach(item => {
  item.addEventListener("click", () => {
    const list = event.target.nextElementSibling;
    list.classList.toggle("painting-style__dropdown_show")
    event.preventDefault();
    if (!list) {
      e.stopPropagation();
    }
  })
})

.painting-style__dropdown {
  display: none;
  position: absolute;
  width: 300px;
  height: 300px;
  background: #e5e5e5;
}

.painting-style__dropdown_show {
  display: block;
}

<a class="link-reset header__dropdown-link" href="">Пункт меню</a>
<ul class="list-reset painting-style__dropdown">
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link tintoretto" href="#">Подпункт</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link fridrikh" href="#">Подпункт</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link leonardo" href="#">Подпункт</a>
  </li>
  <li class="painting-style__dropdown-item">
    <a class="link-reset painting-style__dropdown-link verokeoy" href="#">Подпункт</a>
  </li>
</ul>

Answer 1

Закрывается при клике по ссылке-спойлеру и по документу. Клики внутри списка не влияют на отображение:

document.querySelectorAll(".header__dropdown-link").forEach(el => {
  el.addEventListener("click", (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    fnCloseAllDropdown(ev.target.nextElementSibling);
    ev.target.nextElementSibling.classList.toggle("painting-style__dropdown_show");
  });
});

document.addEventListener("click", (ev) => {
  if (ev.target.closest(".painting-style__dropdown_show")) return;
  ev.preventDefault();
  ev.stopPropagation();
  fnCloseAllDropdown();
});

function fnCloseAllDropdown(obj) {
  document.querySelectorAll(".painting-style__dropdown").forEach(el => {
    if (el != obj) {
      el.classList.remove("painting-style__dropdown_show");
    }
  });
}

.painting-style__dropdown {
  display: none;
  position: absolute;
  width: 300px;
  height: 300px;
  background: #e5e5e5;
}

.painting-style__dropdown_show {
  display: block;
}

<ul class="list-reset painting-style__list">
  <li class="painting-style__list-item">
    <a class="link-reset header__dropdown-link" href="">Пункт меню 1</a>
    <ul class="list-reset painting-style__dropdown">
      <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>
  </li>
  <li class="painting-style__list-item">
    <a class="link-reset header__dropdown-link" href="">Пункт меню 2</a>
    <ul class="list-reset painting-style__dropdown">
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link tintoretto" href="">Подпункт5</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link fridrikh" href="">Подпункт6</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link leonardo" href="">Подпункт7</a>
      </li>
      <li class="painting-style__dropdown-item">
        <a class="link-reset painting-style__dropdown-link verokeoy" href="">Подпункт8</a>
      </li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

Скрытие дропдауна по клику вне его

Ответы (1 шт):