J'ai 4 menus et avec ce morceau de code, je peux afficher les menus et les cacher avec des btns spécifiques. ma question est de savoir comment je peux, lorsque j'ouvre un menu et que je ne le ferme pas, puis que j'en ouvre un autre, fermer les menus précédents ? j'ai essayé de stocker le menu ouvert dans une variable et de le vérifier lorsque j'en ouvre un autre mais cela n'a pas fonctionné.
<body>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<button class="btn">open</button>
<div class="items">
<div class="items-container">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 6</div>
</div>
</div>
</div>
</div>
</body>
const btns = document.querySelectorAll(".btn");
btns.forEach(btn => {
const menu = btn.parentElement;
const items = menu.querySelector(".items");
const itemsContainer = items.querySelector(".items-container");
const itemsContainerHeight = itemsContainer.getBoundingClientRect().height;
let previousActivebtn = "";
btn.addEventListener("click", (e) => {
// change btn text
if (e.currentTarget.innerHTML == "open") {
e.currentTarget.innerHTML = "close";
} else {
e.currentTarget.innerHTML = "open";
}
//show and hid the menus
if (!items.classList.contains("item-active")) {
items.classList.add("item-active");
items.style.height = itemsContainerHeight + 32 + "px";
} else {
items.classList.remove("item-active");
items.removeAttribute("style");
}
});
});
