使用JavaScript切换可见性的响应式菜单显示异常问题求助

问题根源 #

你遇到的问题是：小屏下点击折叠菜单内容后，JS直接给元素添加了内联样式display:none，而CSS媒体查询的样式优先级低于内联样式。当屏幕尺寸放大到1270px以上时，内联的display:none依然生效，覆盖了大屏下display:block的样式，导致内容无法自动恢复显示。

解决方案 #

通过CSS类控制显示状态替代直接修改内联样式，并监听窗口尺寸变化，强制大屏时恢复所有菜单内容的显示：

修改后的CSS代码 #

#assist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 17px;
  white-space: nowrap;
  max-width: 1300px;
}

.toggle {
  font-size: 1.2rem;
  cursor: pointer; /* 提示可点击的交互状态 */
}

.content {
  display: block;
  margin-top: 4px;
}

/* 用类控制隐藏状态 */
.content.hidden {
  display: none;
}

.content a {
  display: grid;
}

#assist .content {
  line-height: 35px;
  margin-bottom: 50px;
}

@media screen and (max-width: 1270px) {
  #assist {
    grid-template-columns: repeat(1, 1fr);
  }
  #assist .content {
    display: none;
  }
}

修改后的JavaScript代码 #

const toggleElements = document.querySelectorAll('.toggle');
const contentElements = document.querySelectorAll('.content');

// 点击标题切换内容显示/隐藏
toggleElements.forEach(toggle => {
  const content = toggle.nextElementSibling;
  
  toggle.addEventListener('click', () => {
    content.classList.toggle('hidden');
  });
});

// 监听窗口尺寸变化，大屏时强制显示所有内容
window.addEventListener('resize', () => {
  if (window.innerWidth > 1270) {
    contentElements.forEach(content => {
      content.classList.remove('hidden');
    });
  }
});

// 页面初始化时触发一次尺寸检查，确保状态正确
window.dispatchEvent(new Event('resize'));

保留原HTML结构 #

<div id="assist">
  <div>
    <span class="toggle">退货政策</span>
    <div class="content">
      <a href="">退货政策详情</a>
      <a href="">测试项2</a>
      <a href="">测试项3</a>
    </div>
  </div>
  <div>
    <span class="toggle">企业服务</span>
    <div class="content">
      <a href="">企业信息查询</a>
      <a href="">测试项2</a>
      <a href="">测试项3</a>
    </div>
  </div>
</div>

关键改动说明 #

1. 用.hidden类替代内联样式控制隐藏，让媒体查询的样式优先级可以正常生效
2. 添加窗口resize事件监听，当屏幕宽度超过1270px时，自动移除所有内容的hidden类
3. 初始化时触发一次尺寸检查，确保页面加载时的状态符合当前屏幕尺寸
4. 给.toggle添加cursor:pointer，提升交互提示体验

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