Как закрыть навигацию, нажав снаружи и рефакторинг Js? ⇐ Javascript

[Anonymous]

Привет, я пытаюсь создать собственную навигацию, используя только чистый HTML, CSS и Js. У меня это почти получилось, но мой Js не очень хорош, и я думаю, что это могло бы быть чище. Мне нужна функциональность...
когда вы щелкаете раскрывающийся список, если есть другой раскрывающийся список, он закроется. Если вы щелкните за пределами раскрывающегося списка, он закроется. Я добился этого, но думаю, что это могло бы быть чище. Также для мобильной навигации я бы хотел, чтобы она закрывалась, когда вы нажимаете за пределами навигации, чего мне не удалось добиться. Вот репозиторий GitHub https://github.com/danbakerri/bulma-test и сам сайт https://danbakerri.github.io/bulma-test/, чтобы увидеть его в действии, скрипт находится внизу индекса. страница (на данный момент используется платформа Bulma)
это HTML для раскрывающихся списков

Код: Выделить всё

More



 About 
 Jobs 
 Contact 

 Report an issue 

а это js (он работает так, как я хочу, но думаю, какие-нибудь идеи могут быть чище?)

Код: Выделить всё

  window.addEventListener("load", function () {
// wait until the page loads before working with HTML elements
document.addEventListener("click", function (event) {
//click listener on the document
document.querySelectorAll(".navbar-dropdown").forEach(function (el) {
if (el !== event.target) el.classList.remove("is-active");
// close any showing dropdown that isn't the one just clicked
});
document
.querySelectorAll(".navbar-dropdown-link")
.forEach(function (el) {
if (el !== event.target) el.classList.remove("is-active");
// close any showing dropdown that isn't the one just clicked
});
if (event.target.matches(".navbar-dropdown-link")) {
event.target
.closest(".has-dropdown")
.querySelector(".navbar-dropdown")
.classList.toggle("is-active");
}
if (
event.target.matches(".navbar-dropdown-link") &&
event.target.matches(".is-active")
) {
event.target
.closest(".has-dropdown")
.querySelector(".navbar-dropdown")
.classList.remove("is-active");
}
if (event.target.matches(".navbar-dropdown-link")) {
event.target
.closest(".has-dropdown")
.querySelector(".navbar-dropdown-link")
.classList.toggle("is-active");
}
// if this is a dropdown button being clicked, toggle the show class
});
});

а для открытия и закрытия навигации на мобильном телефоне у меня есть кнопка

Код: Выделить всё

и Js. Я хотел бы отредактировать этот скрипт, чтобы он закрывался, когда вы щелкаете где-нибудь за пределами навигации есть идеи? вот скрипт у меня есть (взято с сайта bulma

Код: Выделить всё

  document.addEventListener("DOMContentLoaded", () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);

// Add a click event on each of them
$navbarBurgers.forEach((el) => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);

// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"

el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
});

Любые предложения о том, как я мог бы упростить свой скрипт и обеспечить функциональность закрытия навигации при выходе из него, буду очень признателен, спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... ctoring-js