打开和关闭菜单答案

【问题标题】：open and close menus打开和关闭菜单
【发布时间】：2020-10-12 21:26:10
【问题描述】：

我有 4 个菜单，通过这段代码，我可以显示菜单并使用特定的 btns 隐藏它们。我的问题是，当我打开一个菜单并且我不关闭它然后我又打开另一个关闭时，我该怎么做以前的菜单？我试图将打开的菜单存储在一个变量中，并在我打开另一个菜单时检查它，但它不起作用。

    <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");

        }


    });
});

【问题讨论】：

你在使用像 Boostrap 这样的框架吗？

标签： javascript html css navigation

【解决方案1】：

你把它复杂化了。你可以创建一个 CSS 规则来确保 .items 被隐藏，除非 .menu 被打开：

.menu .items:not(.open) {
    display: none
}

你可以像这样创建一个函数：

function open(item) {
    if (!item.classList.contains("open")) {
        //Hide whatever was opened
        for (let it of document.querySelectorAll(.menu .items.open)) {
            it.classList.remove("open")
        }
        item.classList.add("open");
    } else {
        item.classList.remove("open");
    }
}

只需将类为items 的项目传递给此函数即可。

【讨论】：