当下一次切换时，如何在单击和关闭之前的两个菜单项之间切换？

Question

我想做什么。我有一个菜单导航与两个菜单项，搜索和汉堡包图标相邻。

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

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

因此，我想在搜索和菜单内容之间切换，不管选择/切换哪一个。若要关闭前一个(移除类并将类添加到下一个活动元素)。

我该怎么做？

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

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