如何在单击时切换两个菜单项并在切换下一个时关闭上一个？答案

【问题标题】：How to toggle between two menu items on click and close previous when next is toggled?如何在单击时切换两个菜单项并在切换下一个时关闭上一个？
【发布时间】：2020-04-11 11:27:49
【问题描述】：

我想做什么。我有一个菜单导航，其中有 2 个菜单项，搜索和汉堡图标彼此相邻。

当我点击“菜单”时，div 将显示菜单导航项，并且当我再次点击时将关闭，因为切换事件。

但是，当我打开“菜单”并切换回“搜索”时，应该显示一个不同的 div，它会在切换时弄乱这两者之间的逻辑结构。

所以，无论选择/切换哪一个，我都想在 SEARCH 和 MENU 内容之间切换。关闭前一个（删除类并将类添加到下一个活动元素）。

我该怎么做？

HTML：

<a href="#" class="search js-search">SEARCH</a>

<a href="#" class="hamburger js-hamburger">MENU</a>

<nav class="navigation js-navigation">
    <div class="content hidden">
        <input type="search" placeholder="search" />
    </div>

    <div class="content hidden">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

JS：

(() => {
    const navigation = document.querySelector('.js-navigation');

    if(!navigation) {
        return;
    }

    const hamburger = document.querySelector('.js-hamburger');
    const search = document.querySelector('.js-search');

    let contents = document.querySelectorAll('.content');

    const onClick = (e) => {
        e.preventDefault();

        contents.forEach((content) => {
            content.classList.remove('hidden');
            content.classList.add('hidden');
        })
    }


    hamburger.addEventListener('click', onClick);
    search.addEventListener('click', onClick);
});

【问题讨论】：

标签： javascript html

【解决方案1】：

你应该添加：

            if (content.classList.contains("hidden")) {

              content.classList.remove('hidden');
            } else {
              content.classList.add('hidden');
            }

更改 classList 对我不起作用，但这生效了：

<html>

<body>

<a href="#" class="search js-search" onClick="toggle('search');">SEARCH</a>

<a href="#" class="hamburger js-hamburger" onClick="toggle('menu');">MENU</a>

<nav class="navigation js-navigation">
    <div id="search" class="content">
        <input type="search" placeholder="search" />
    </div>

    <div id="menu" class="content">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

<script>

function toggle(id) {
    var isHidden = document.getElementById(id).style.visibility == "hidden";
    document.getElementById(id).style.visibility = isHidden ? "visible" : "hidden";
}
</script>

</body>
</html>

似乎你也可以选择使用 classList.toggle：

const navigation = document.querySelector('.js-navigation');

const hamburger = document.querySelector('.js-hamburger');
const search = document.querySelector('.js-search');

let contents = document.querySelectorAll('.content');

const onClick = (e) => {
    e.preventDefault();

    contents.forEach((content) => {
        content.classList.toggle('hidden');
    })
}


hamburger.addEventListener('click', onClick);
search.addEventListener('click', onClick);

【讨论】：

.contains 和 .includes 之间有什么区别吗？当一个被点击时会切换吗？