如果满足条件，如何使用事件侦听器在单击时切换某些内容

Question

我想在点击时使用按钮切换导航栏，如果导航栏已经激活，我想在用户点击任何位置时禁用它。事件侦听器都是连接的，并且切换代码正常工作；点击屏幕上的任何位置以关闭"；功能不起作用。

编辑：我现在可以通过点击任何地方进行切换，但我不能使用按钮进行切换，我只能打开而不能关闭。

const button = document.querySelector('button.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
let menuActive = false;
button.addEventListener('click', (e) => {
e.stopPropagation();
if (!menuActive) {
menu.classList.toggle('hidden');
menuActive = true;
}
});
window.addEventListener('click', () => {
if (menuActive) {
menu.classList.toggle('hidden');
menuActive = false;
}
});

Answer 1

问题是，当您单击按钮时，同时也在单击窗口。您应该使用stopProgopation()。

这里有一个解决方案。单击该按钮时，将显示菜单。如果用户在屏幕上点击按钮以外的其他地方，菜单将消失。

<div id="menu" class="mobile-menu hidden">This is the menu</div>
<button class="mobile-menu-button">Button</button>
<script>
const button = document.querySelector('button.mobile-menu-button');
const menu = document.getElementById('menu');
let menuActive = false;
button.addEventListener('click', (e) => {
e.stopPropagation();
if (!menuActive) {
menu.classList.toggle('hidden');
menuActive = true;
}
});
window.addEventListener('click', () => {
if (menuActive) {
menu.classList.toggle('hidden');
menuActive = false;
}
});
</script>
<style>
.mobile-menu {
display: block;
}
.hidden {
display: none;
}
</style>

Answer 2

我发现我不需要按钮本身的条件，只需要窗口。感谢大家的帮助。

const button = document.querySelector('button.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
let menuActive = false;
button.addEventListener('click', (e) => {
e.stopPropagation()
menu.classList.toggle('hidden');
menuActive = true;
});

window.addEventListener('click', () => {
if (menuActive) {
menu.classList.toggle('hidden');
menuActive = false;
}
});