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

当我单击“ MENU”时,div将显示菜单导航项,并且由于切换事件而再次单击时将关闭。

但是,当我打开“ MENU”并切换回“ SEARCH”时,应显示不同的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);
});

最佳答案

您不应该添加:

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

关于javascript - 如何在单击时在两个菜单项之间切换并在下一个切换时关闭上一个?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59400012/

10-12 12:47
查看更多