Блог

Главная - Вопросы по программированию - открывать и закрывать меню

открывать и закрывать меню

#javascript #html #css #navigation

#javascript #HTML #css #навигация

Вопрос:

У меня есть 4 меню, и с помощью этого фрагмента кода я могу показывать меню и скрывать их с помощью определенных btn. мой вопрос в том, как я могу, когда я открываю меню и не закрываю его, а затем открываю другое, закрыть предыдущие меню? я попытался сохранить открытое меню в переменной и проверить его при открытии другого, но это не сработало.

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

        }


    });
});

Комментарии:

1. Используете ли вы фреймворк, подобный Boostrap?

Ответ №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 .