我想做什么我有一个菜单导航,带有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/