我想让我的导航栏在offcanvas菜单打开时改变背景颜色，在offcanvas关闭时恢复到原来的颜色。我设法找到了在offcanvas菜单启动时应用于它的类，并使它工作，唯一的例外是，如果你在打开offcanvas的同时点击导航栏或DOM中的任何其他地方，颜色仍然会改变：（我希望得到一些帮助，防止你在DOM中随机点击时颜色发生变化，并让导航栏只在offcanvas按预期关闭时才改变颜色。你可以在这里观看直播：https://reliable-stardust-881a63.netlify.app/
const navBar = document.querySelector("#offcanvas-navbar");
const fixedTop = document.querySelector("body > nav");
document.addEventListener('click', e => {
if (navBar.classList.contains('showing' || 'show')) {
fixedTop.style.backgroundColor = '#ff2fac';
e.preventDefault();
} else {
fixedTop.style.backgroundColor = '#adff2f';
}
})
1条答案
按热度按时间wh6knrhe1#
在
classList.contains()方法中有OR逻辑。if (navBar.classList.contains('showing' || 'show')) {应该是这样
if (navBar.classList.contains('showing') || navBar.classList.contains('show')) {编辑：要回答“防止在DOM中随机单击时颜色发生变化”的问题，需要将onclick处理程序附加到按钮本身。