点击Show more按钮无法移除menu-hidden类，隐藏列表项不显示如何解决？

问题原因 #

• document.querySelectorAll() 返回的是包含所有匹配元素的NodeList集合，不是单个DOM元素，本身没有classList属性，直接调用classList.remove()会抛出错误，导致逻辑失效。
• 你当前的选择器命中了所有带.menu__item的元素，不需要额外操作无.menu-hidden的元素，可直接筛选目标元素减少冗余操作。
• #showMore绑定在a标签上，点击后会触发默认跳转刷新行为，即使类移除逻辑执行了也会被页面刷新覆盖。

修正后的JavaScript代码 #

let showMore = document.querySelector('#showMore');

showMore.addEventListener('click' , (e) => {
  // 阻止a标签默认跳转刷新
  e.preventDefault();
  // 仅选择所有带menu-hidden类的目标元素
  let hiddenItems = document.querySelectorAll('.menu-hidden');
  // 遍历集合逐个移除隐藏类
  hiddenItems.forEach(item => {
    item.classList.remove('menu-hidden');
  });
  // 可选附加逻辑：点击后隐藏Show More按钮，也可根据需求改成切换Show Less逻辑
  showMore.parentElement.style.display = 'none';
})

额外优化提示 #

当前你的HTML结构中ul标签下直接嵌套了div标签，不符合HTML规范（ul的直接子元素只能是li），后续可调整将标题容器改成带专属类的li元素，避免浏览器解析DOM时出现不可预期的异常。

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