当前位置：首页 > JavaScript DOM 与事件 > 用原生JavaScript DOM实现折叠菜单与模态框交互效果

用原生JavaScript DOM实现折叠菜单与模态框交互效果

作者：页面旅途时间：2026-10-30 19:03:36浏览：641

本文详细讲解如何使用原生JavaScript DOM API实现网页中常见的折叠菜单与模态框交互效果，涵盖DOM查询、事件绑定与事件委托、状态切换类名设计、键盘可访问性与无障碍支持等核心实践。

在前端交互开发中，折叠菜单（Accordion）和模态框（Modal）是两种最基础且高频出现的组件。许多开发者在初学阶段往往依赖现成的UI框架或第三方库，但在轻量页面或组件开发中，仅借助原生JavaScript的DOM API便能高效、干净地完成这两类交互。本文将从DOM查询、类名切换、事件监听及事件冒泡与委托机制切入，完整实现手风琴折叠菜单与带遮罩层模态框的交互逻辑。

用原生JavaScript DOM实现折叠菜单与模态框交互效果
图 1：原生JavaScript实现折叠菜单与模态框的整体架构与核心处理流程

一、核心交互原理与DOM操作原则

在编写代码前，我们需要建立一个清晰的组件构建思路：原生JavaScript在现代Web开发中不推荐直接操作大量的行内样式（例如频繁设置 element.style.display = 'block'），而是应当采用“状态由类名控制，表现交由CSS处理，JS只负责状态调度”的关注点分离原则。

实现这两个组件主要涉及以下几项DOM标准API：

  • DOM节点查询：使用 document.querySelector() 与 document.querySelectorAll() 进行精准或批量查找。
  • 类名管理：使用 element.classList.add()、element.classList.remove() 及 element.classList.toggle() 操作状态类。
  • 事件监听与传播控制：使用 addEventListener() 绑定事件，利用 e.target、e.currentTarget 以及 e.stopPropagation() 精确控制事件流向。

二、原生实现手风琴折叠菜单（Accordion）

假设用户在一个常见问答（FAQ）列表中查看问题，点击某一个问题时展开对应的解答内容，再次点击或者点击其他问题时自动收起。下面通过具体步骤与代码实现该效果。

1. HTML结构与CSS样式设计

HTML结构由一个外层容器和若干个包含触发标题与内容主体的条目组成。为了保证无障碍访问，为标题按钮添加 aria-expanded 属性。

<!-- 折叠菜单容器 -->
<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false">
      什么是DOM？
      <span class="icon">+</span>
    </button>
    <div class="accordion-content">
      <div class="accordion-inner">
        DOM（文档对象模型）是HTML文档的编程接口，将文档解析为一个由节点构成的树状结构。
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header" aria-expanded="false">
      事件冒泡与事件委托有什么优势？
      <span class="icon">+</span>
    </button>
    <div class="accordion-content">
      <div class="accordion-inner">
        利用事件冒泡将事件统一监听在父容器上，减少内存占用并天然支持动态新增子节点。
      </div>
    </div>
  </div>
</div>

在CSS中，通过为 .accordion-content 设置 max-height: 0 和 overflow: hidden 实现默认收起；当父级加上 .is-active 时通过动态高度平滑过渡：

.accordion-item {
  border-bottom: 1px solid #e2e8f0;
}
.accordion-header {
  width: 100%;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-inner {
  padding: 0 0 1rem 0;
  color: #475569;
  font-size: 0.95rem;
}
.accordion-item.is-active .icon {
  transform: rotate(45deg);
}
.icon {
  transition: transform 0.2s ease;
}

2. 折叠交互逻辑：高度自适应与排他逻辑

很多实现会给展开内容写死固定的 max-height: 300px，但这在内容动态变化或超长时容易引发延迟卡顿或内容溢出。更优雅的方式是在JS中通过元素的 scrollHeight 属性动态赋值。

用原生JavaScript DOM实现折叠菜单与模态框交互效果
图 2：折叠菜单从用户点击到高度计算与类名同步的操作步骤图

下面是用于驱动折叠菜单的完整原生JavaScript代码，采用事件委托方式将事件挂载在容器上：

function initAccordion(containerSelector) {
  const container = document.querySelector(containerSelector);
  if (!container) return;

  // 使用事件委托，将点击监听绑定在折叠容器上
  container.addEventListener('click', (event) => {
    const header = event.target.closest('.accordion-header');
    if (!header) return; // 如果点击的不是头部触发区，直接忽略

    const currentItem = header.parentElement;
    const content = header.nextElementSibling;
    const isCurrentlyActive = currentItem.classList.contains('is-active');

    // 若需要手风琴排他效果（同时只展开一项），先收起其他所有展开项
    const allItems = container.querySelectorAll('.accordion-item');
    allItems.forEach((item) => {
      if (item !== currentItem && item.classList.contains('is-active')) {
        item.classList.remove('is-active');
        item.querySelector('.accordion-header').setAttribute('aria-expanded', 'false');
        item.querySelector('.accordion-content').style.maxHeight = null;
      }
    });

    // 切换当前项的状态
    if (isCurrentlyActive) {
      currentItem.classList.remove('is-active');
      header.setAttribute('aria-expanded', 'false');
      content.style.maxHeight = null;
    } else {
      currentItem.classList.add('is-active');
      header.setAttribute('aria-expanded', 'true');
      // 关键：读取 scrollHeight，赋予精准内容高度实现平滑展开
      content.style.maxHeight = content.scrollHeight + 'px';
    }
  });
}

// 初始化
initAccordion('#faqAccordion');

三、原生实现模态框（Modal）交互效果

模态框是脱离常规文档流的全局层级组件，通常包括一个半透明的遮罩层（Backdrop）和一个居中的弹窗内容框。模态框不仅要求正确的显示与隐藏，还涉及阻止底层滚动、防止点击穿透和键盘Escape键关闭等细节。

1. 模态框HTML结构与CSS布局

<!-- 触发按钮 -->
<button id="openModalBtn" class="btn">打开用户详情</button>

<!-- 模态框容器与遮罩层 -->
<div class="modal-overlay" id="appModal" aria-hidden="true">
  <div class="modal-dialog" role="dialog" aria-modal="true">
    <div class="modal-header">
      <h3>用户信息设置</h3>
      <button class="modal-close" id="closeModalBtn" aria-label="关闭">&times;</button>
    </div>
    <div class="modal-body">
      <p>这里是模态框的具体内容，支持表单项或提示文本。</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" id="cancelModalBtn">取消</button>
      <button class="btn btn-primary" id="confirmModalBtn">确认</button>
    </div>
  </div>
</div>

CSS关键在于通过绝对或固定定位（position: fixed）覆盖视口，并通过 opacity 与 visibility 配合类名实现淡入淡出：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1000;
}
.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.modal-dialog {
  background: #ffffff;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-20px);
  transition: transform 0.25s ease;
}
.modal-overlay.is-visible .modal-dialog {
  transform: translateY(0);
}
body.modal-open {
  overflow: hidden; /* 弹窗打开时禁止底层页面滚动 */
}

2. 模态框的事件流与交互边界

模态框交互中最容易产生的Bug就是点击内容框时导致弹窗意外关闭。这正是由于DOM事件的“冒泡机制”所致：在遮罩层上绑定的关闭事件，会收到由内部子元素冒泡上来的点击事件。解决此问题有两个标准策略：一是通过 e.target === overlay 进行目标校验，二是阻断内容框的冒泡。

用原生JavaScript DOM实现折叠菜单与模态框交互效果
图 3：模态框事件监听、事件冒泡拦截与点击边界判断逻辑

3. 原生模态框完整JS实现

class SimpleModal {
  constructor(overlaySelector) {
    this.overlay = document.querySelector(overlaySelector);
    if (!this.overlay) return;

    this.dialog = this.overlay.querySelector('.modal-dialog');
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.initEvents();
  }

  initEvents() {
    // 1. 点击遮罩层空白处关闭
    this.overlay.addEventListener('click', (e) => {
      // 仅当点击直接落在遮罩背景上时才关闭，防止内容区冒泡误触发
      if (e.target === this.overlay) {
        this.close();
      }
    });

    // 2. 绑定内部所有带有关闭意图的按钮
    const closeButtons = this.overlay.querySelectorAll('.modal-close, #cancelModalBtn');
    closeButtons.forEach(btn => {
      btn.addEventListener('click', () => this.close());
    });
  }

  open() {
    this.overlay.classList.add('is-visible');
    this.overlay.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');

    // 监听键盘按键
    document.addEventListener('keydown', this.handleKeyDown);

    // 聚焦管理：将焦点移至模态框，提升无障碍体验
    if (this.dialog) {
      this.dialog.focus();
    }
  }

  close() {
    this.overlay.classList.remove('is-visible');
    this.overlay.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('modal-open');

    // 及时解绑键盘事件，防止内存泄漏和全局污染
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  handleKeyDown(e) {
    // 按下 ESC 键快速关闭模态框
    if (e.key === 'Escape' || e.keyCode === 27) {
      this.close();
    }
  }
}

// 实例化并绑定打开按钮
const userModal = new SimpleModal('#appModal');
const openBtn = document.getElementById('openModalBtn');
if (openBtn) {
  openBtn.addEventListener('click', () => userModal.open());
}

四、两类交互组件的关键要素对比与技术选型

虽然折叠菜单和模态框都属于“显示/隐藏”类的交互，但由于其处于不同的文档上下文，在DOM生命周期管理、事件捕获方式和无障碍规范上有明确的差异：

核心注意事项： 1. 动态绑定的事件监听器（如 keydown）必须在组件隐藏时成对移除（removeEventListener），避免在SPA或复杂多页应用中造成内存泄漏。
2. 避免在JS中直接修改多个散落的CSS属性，应使用集中声明的类名（如 .is-active、.is-visible），保持代码易维护和CSS过渡效果生效。

五、原生DOM交互实现全景总结

掌握原生JavaScript DOM操作是理解前端框架底层运行机制的关键基石。通过手风琴折叠菜单与模态框的实际编码，我们可以提炼出一套通用的原生交互实现体系。

用原生JavaScript DOM实现折叠菜单与模态框交互效果
图 4：原生DOM交互组件实现标准思维全景图

通过本文的方法，读者可以在完全不引入外部框架的情况下，仅用几十行轻量、清晰的原生JavaScript代码完成具有高度可用性、平滑动效和良好无障碍特性的折叠菜单与模态框组件，兼顾开发效率与页面加载性能。

作者最新文章

JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑

2026-11-05 16:19:37

JavaScript怎么读写LocalStorage与SessionStorage

2026-11-05 15:40:11

anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库

2026-11-05 11:24:55

flv.js 与 hls.js 在直播场景下的选型对比

2026-11-05 08:18:52

JavaScript能做什么？前端开发中的作用与应用场景解析

2026-11-04 23:17:54

相关标签：

JavaScript动态网页设计
相关文章
更多