如何使用 JavaScript 动态切换元素可见性并适配响应式断点-js教程-PHP中文网

如何使用 JavaScript 动态切换元素可见性并适配响应式断点

本文讲解如何在响应式菜单中正确实现点击展开/收起功能，避免因内联样式覆盖媒体查询导致的显示异常问题。核心方案是结合事件监听与 CSS 类控制，而非直接操作 style.display。

本文讲解如何在响应式菜单中正确实现点击展开/收起功能，避免因内联样式覆盖媒体查询导致的显示异常问题。核心方案是结合事件监听与 css 类控制，而非直接操作 `style.display`。

在构建响应式导航菜单时，常见的需求是：大屏下默认显示全部内容，小屏下默认折叠、点击标题展开/收起。但若直接通过 JavaScript 修改 element.style.display（如 content.style.display = 'none'），会生成高优先级的内联样式，从而覆盖 CSS 媒体查询中定义的 display: block，导致窗口放大后内容仍不可见——这正是你遇到的问题根源。

✅ 正确解法是用 CSS 类（class）控制显隐状态，让媒体查询与 JS 逻辑解耦：

移除所有 style.display 直接赋值，改用添加/移除统一类名（如 .is-hidden）；
在 CSS 中定义该类的行为，并确保其可被媒体查询覆盖；
配合 resize 事件，在尺寸变化时重置折叠状态（可选，提升体验）。

以下是优化后的完整实现：

Gradle 9.8.0

下载

<!-- HTML 结构保持不变 -->
<div id="assist">
  <div>
    <span class="toggle">Return Policy</span>
    <div class="content">
      <a href="#">What is the return policy</a>
      <a href="#">Test 2</a>
      <a href="#">Test 3</a>
    </div>
  </div>
  <div>
    <span class="toggle">Corporate</span>
    <div class="content">
      <a href="#">Where can I learn more about company</a>
      <a href="#">Test 2</a>
      <a href="#">Test 3</a>
    </div>
  </div>
</div>

/* 基础样式 —— 大屏默认显示 */
#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 a { display: grid; }
#assist .content { line-height: 35px; margin-bottom: 50px; }

/* 小屏：默认隐藏内容，但允许 JS 控制显隐 */
@media screen and (max-width: 1270px) {
  #assist { grid-template-columns: 1fr; }
  .content:not(.is-hidden) { display: none; } /* 仅当未加 is-hidden 时才隐藏 */
}

/* 显隐切换类 —— 低优先级，可被媒体查询覆盖 */
.is-hidden { display: none !important; }

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

// 点击切换：仅操作类名，不触碰 style
toggleElements.forEach(toggle => {
  const content = toggle.nextElementSibling;

  toggle.addEventListener('click', () => {
    content.classList.toggle('is-hidden');
  });
});

// 【可选】窗口大小变化时自动重置：小屏保持折叠，大屏强制展开
window.addEventListener('resize', () => {
  const isSmallScreen = window.innerWidth  {
    const content = toggle.nextElementSibling;
    if (isSmallScreen) {
      // 小屏下维持用户选择（不重置），或强制折叠：content.classList.add('is-hidden');
    } else {
      // 大屏下恢复默认可见状态
      content.classList.remove('is-hidden');
    }
  });
});

// 【推荐】首次加载时根据当前视口初始化状态（防 FOUC）
window.addEventListener('load', () => {
  const isSmallScreen = window.innerWidth  {
    const content = toggle.nextElementSibling;
    if (!isSmallScreen) {
      content.classList.remove('is-hidden');
    }
  });
});

? 关键注意事项：