解决JavaScript中点击列表项误触发toggleBtn与菜单切换的问题

核心问题分析 #

1. 页面刷新导致状态重置：列表项内的<a>标签使用了空href=""，点击后会触发浏览器默认的页面刷新行为，页面重新加载后所有DOM元素的类都会恢复初始状态，这就是toggleBtn和menu的active类被移除的根本原因。
2. CSS属性值错误：.menu.active li中的pointer-events: initials是无效值，正确有效值应为pointer-events: initial，该错误会影响列表项的交互可用性，但不是触发状态重置的主因。

解决方案 #

1. 阻止a标签的默认跳转行为 #

修改JavaScript代码，在列表项的点击事件中阻止默认跳转：

let menuToggle = document.querySelector('.toggleBtn');
let menu = document.querySelector('.menu');
let list = document.querySelectorAll('li');

menuToggle.onclick = () => {
    menu.classList.toggle('active');
    menuToggle.classList.toggle('active');
}

list.forEach(item => item.addEventListener('click', function (e) {
    // 阻止a标签跳转的默认行为
    e.preventDefault();
    // 可选：阻止事件冒泡到父元素（若不需要父元素响应该点击）
    e.stopPropagation();
    // 执行激活状态切换逻辑
    list.forEach(i => i.classList.remove('active'));
    this.classList.add('active');
}))

2. 修正CSS的pointer-events属性 #

将CSS中错误的属性值修正：

.menu.active li{
    scale: 1;
    pointer-events: initial; /* 替换错误的initials */
}

可选优化方案 #

如果这些<a>标签不需要跳转功能，可以直接修改href属性值避免页面刷新：

<a href="javascript:void(0)"> <ion-icon name="settings-outline"></ion-icon></a>

内容的提问来源于stack exchange，提问作者Rider