如何实现基于@media查询的响应式Read More展开收起按钮

原有实现的核心问题是依赖内联style属性判断显示状态，无法和@media媒体查询规则联动，同时存在冗余无效DOM节点、未做宽度阈值适配的缺陷，以下是可直接运行的修正方案： #

1. 修正HTML结构 #

移除冗余的空dots省略号节点，删除所有写死的内联样式，给各模块添加语义化类名，支持多组件复用，不需要单独配置id：

<div class="readmore-wrapper">
  <p class="readmore-excerpt">
    Can I put a paragraph of text here?
  </p>
  <div class="readmore-content">
    <p>The text I want to be on read more</p>
  </div>
  <button class="readmore-btn">READ MORE</button>
</div>

2. 编写CSS样式（含媒体查询规则） #

以768px宽度为阈值：

• 宽度小于768px（移动端）：默认隐藏长内容，显示省略号和控制按钮，点击可展开/收起
• 宽度大于等于768px（桌面端）：直接展示全部内容，隐藏按钮和省略号
  省略号通过CSS伪元素实现，不需要额外DOM节点：

/* 移动端默认折叠状态 */
.readmore-content {
  display: none;
}
.readmore-excerpt {
  display: inline;
}
/* 展开状态类，由JS控制切换 */
.readmore-wrapper.expanded .readmore-content {
  display: block;
}
/* 省略号效果 */
.readmore-excerpt::after {
  content: "...";
}
.readmore-wrapper.expanded .readmore-excerpt::after {
  content: "";
}
.readmore-btn {
  display: block;
  margin-top: 8px;
  cursor: pointer;
  /* 按钮样式可按需自定义调整 */
}

/* 桌面端媒体查询规则 */
@media screen and (min-width: 768px) {
  .readmore-content {
    display: block !important;
  }
  .readmore-excerpt::after {
    content: "" !important;
  }
  .readmore-btn {
    display: none !important;
  }
}

注意：媒体查询中的!important用于覆盖JS切换类产生的样式优先级，确保宽度达到阈值时，无论组件之前是展开还是收起状态，都强制展示全文、隐藏按钮，避免样式冲突。

3. 重写JS交互逻辑 #

不再读取/修改内联style属性，完全通过类名切换控制状态，同时监听窗口尺寸变化，跨宽度阈值时自动重置组件状态，避免拖动窗口改变尺寸后出现样式错乱：

// 初始化所有阅读更多组件
document.querySelectorAll('.readmore-wrapper').forEach(wrapper => {
  const btn = wrapper.querySelector('.readmore-btn');
  
  btn.addEventListener('click', () => {
    const isExpanded = wrapper.classList.toggle('expanded');
    btn.textContent = isExpanded ? 'READ LESS' : 'READ MORE';
  });
});

// 窗口尺寸变化时重置状态
const handleResize = () => {
  const isDesktopWidth = window.matchMedia('(min-width: 768px)').matches;
  if (isDesktopWidth) {
    document.querySelectorAll('.readmore-wrapper.expanded').forEach(wrapper => {
      wrapper.classList.remove('expanded');
      wrapper.querySelector('.readmore-btn').textContent = 'READ MORE';
    });
  }
};
window.addEventListener('resize', handleResize);
// 页面加载时先执行一次状态校准
handleResize();

方案优势 #

• 完全基于CSS类控制交互状态，不依赖内联样式，和媒体查询规则完全兼容
• 移除了冗余的空dots节点，省略号通过CSS实现，符合编码规范
• 自动适配窗口尺寸变化，不会出现拉伸窗口后按钮/内容显示错乱的问题
• 支持同页面多组件复用，不需要给每个组件单独配置id

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