Question

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

        }


    });
});

Answer 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类的项目传递给该函数。

打开和关闭菜单

1 个答案: