本教程详细阐述如何使用CSS和JavaScript构建一个响应式“阅读更多/更少”功能。通过CSS优先原则，我们默认控制内容和按钮的显示状态，并利用媒体查询在特定浏览器宽度下动态切换它们。JavaScript则负责处理按钮点击事件，实现内容的平滑展开与收起，同时更新按钮文本，确保在不同设备上提供一致且优化的用户体验。

引言：构建自适应的内容折叠与展开功能

在现代网页设计中，为了优化用户体验和布局，尤其是在移动设备上，经常需要将长文本内容进行折叠，并通过一个“阅读更多/更少”按钮来控制其显示与隐藏。更进一步的需求是，这个功能本身也应该是响应式的：在某些屏幕宽度下，我们可能希望内容默认完全展开，无需按钮；而在另一些宽度下，则需要按钮来控制内容的折叠。

传统的实现方式可能依赖于内联样式或冗余的占位符（如…），这不仅增加了HTML的复杂性，也使得通过CSS媒体查询进行响应式控制变得困难。本教程将介绍一种更优雅、更具可维护性的方法，通过CSS优先的策略结合JavaScript事件处理，实现一个完全响应式的“阅读更多/更少”功能。

核心策略：CSS优先的响应式设计

实现响应式“阅读更多/更少”功能的关键在于采用“CSS优先”的策略。这意味着我们首先使用CSS来定义内容和按钮的默认显示状态，然后利用媒体查询在特定屏幕宽度下覆盖这些默认状态。JavaScript的角色则被简化为仅处理用户交互，即按钮的点击事件，并根据内容当前的状态切换其可见性及按钮文本。

这种方法有以下优势：

立即学习“Java免费学习笔记（深入）”；

1. 可维护性高：显示逻辑主要由CSS控制，易于理解和修改。
2. 性能优化：页面加载时，CSS直接决定初始布局，避免了JavaScript对DOM的额外操作。
3. 渐进增强：即使JavaScript失效，内容也能根据CSS规则进行合理的显示。

HTML结构：简洁与语义化

为了实现响应式功能，我们需要一个简洁且语义化的HTML结构。我们将使用一个主div来包裹段落内容、可折叠的额外文本以及控制按钮。原有的dots（省略号）元素将被移除，因为它的显示逻辑可以通过CSS和JavaScript更灵活地控制。

<div>     <p>          这里放置了文章的开篇内容，用户可以立即看到。     </p>     <div class="more-text">          <p>             这部分内容在某些屏幕宽度下默认隐藏，需要点击“阅读更多”按钮才能展开。             它包含了更详细的信息，是文章的扩展部分。          </p>     </div>     <button class="btn-readmore">         阅读更多     </button> </div>

• more-text 类用于标识需要折叠/展开的额外内容。
• btn-readmore 类用于标识控制内容折叠/展开的按钮。

CSS样式：控制可见性与响应性

CSS是实现响应式行为的核心。我们将定义默认样式，然后使用媒体查询来调整这些样式以适应不同的屏幕尺寸。

Imagen – Google Research

Google Brain team推出的图像生成模型。

19

查看详情

/* 默认样式：在最宽的屏幕上（例如桌面端），额外文本默认显示，按钮隐藏 */ .more-text {     display: block; /* 默认情况下，额外文本是可见的 */ } .btn-readmore {     display: none; /* 默认情况下，阅读更多按钮是隐藏的 */ }  /* 当 .more-text 具有 .active 类时，它将显示 */ .active.more-text {     display: block; }  /* 媒体查询：在特定屏幕宽度范围（例如，平板和手机）内，改变显示行为 */ @media screen and (min-width: 200px) and (max-width: 1000px) {     .btn-readmore {         display: block; /* 在此宽度范围内，显示阅读更多按钮 */     }     .more-text {         display: none; /* 在此宽度范围内，额外文本默认隐藏 */     } }

样式解析：

1. 默认状态 (桌面端优先):
   • .more-text { display: block; }: 在没有特定媒体查询生效时（通常是较宽的屏幕，如桌面），我们希望所有内容都可见。
   • .btn-readmore { display: none; }: 既然内容已完全显示，按钮就没有必要出现。
2. 媒体查询 (移动/平板端):
   • @media screen and (min-width: 200px) and (max-width: 1000px): 这个媒体查询定义了一个屏幕宽度范围，例如从200px到1000px，这通常覆盖了大多数手机和平板设备。
   • .btn-readmore { display: block; }: 在这个范围内，按钮被显示出来，以便用户可以手动展开内容。
   • .more-text { display: none; }: 在这个范围内，额外文本默认被隐藏，以节省屏幕空间。
3. .active.more-text:
   • 这个类配合JavaScript使用。当JavaScript为.more-text元素添加.active类时，它会强制该元素显示，从而实现内容的展开。

JavaScript逻辑：实现交互与状态切换

JavaScript负责处理用户的点击事件，并根据当前状态切换内容的可见性以及按钮的文本。为了提高效率和可维护性，我们采用事件委托（Event Delegation）的方式来处理点击事件。

document.addEventListener("click", function(e) {     let el = e.target; // 获取被点击的元素      // 检查被点击的元素是否是我们定义的阅读更多按钮     if (el.className === "btn-readmore") {         // 找到按钮的父元素，然后在其内部查找 .more-text 元素         let moreTxt = el.parentNode.querySelector(".more-text");          // 切换 .more-text 元素的 'active' 类         // 如果有 'active' 类，则移除；如果没有，则添加         moreTxt.classList.toggle("active");          // 根据 'active' 类的存在与否更新按钮文本         // 如果 moreTxt 现在包含 'active' 类，表示内容已展开，按钮应显示“阅读更少”         // 否则，内容已折叠，按钮应显示“阅读更多”         el.innerHTML = (moreTxt.classList.contains("active")) ? "阅读更少" : "阅读更多";     } });

JavaScript解析：

1. 事件委托: document.addEventListener(“click”, …) 监听整个文档的点击事件。这样做的好处是，即使页面上动态添加了新的.btn-readmore按钮，它们也能自动获得相同的行为，无需为每个按钮单独添加事件监听器。
2. 事件目标判断: if (el.className === “btn-readmore”) 检查被点击的元素是否是我们感兴趣的“阅读更多”按钮。
3. 查找相关元素: el.parentNode.querySelector(“.more-text”) 通过按钮的父元素，找到对应的.more-text内容块。这确保了每个按钮只控制其自身容器内的内容。
4. 切换active类: moreTxt.classList.toggle(“active”) 是关键。它在.more-text元素上添加或移除active类。CSS中定义的.active.more-text { display: block; } 规则将根据这个类的存在来控制内容的显示。
5. 更新按钮文本: el.innerHTML = (moreTxt.classList.contains(“active”)) ? “阅读更少” : “阅读更多”; 根据.more-text是否拥有active类来动态更新按钮的文本，提供清晰的用户反馈。

注意事项与最佳实践

• 可访问性（Accessibility）: 考虑为按钮添加aria-expanded属性，并在JavaScript中动态更新其值，以帮助屏幕阅读器用户理解内容的状态。
• 语义化HTML: 确保使用正确的HTML标签。例如，p标签用于段落，div用于内容分组。
• CSS过渡效果: 为了提供更平滑的用户体验，可以为.more-text的max-height或opacity属性添加CSS过渡效果，而不是直接切换display。但需要注意的是，display属性无法直接过渡。如果需要平滑过渡，可能需要结合max-height或height与overflow: hidden来实现。
• JavaScript模块化: 对于更复杂的项目，建议将JavaScript代码封装到单独的函数或模块中，以提高代码组织性和可重用性。
• 浏览器兼容性: 现代浏览器普遍支持classList和媒体查询。如果需要支持非常旧的浏览器，可能需要Polyfill。

总结

通过本教程介绍的方法，我们成功构建了一个响应式且易于维护的“阅读更多/更少”功能。这种方法的核心在于：

• CSS优先原则：利用CSS媒体查询来控制不同屏幕尺寸下的默认显示状态。
• 简洁的HTML结构：移除不必要的元素，提高代码可读性。
• 事件委托：通过一个监听器处理所有按钮的点击事件，提高性能和可扩展性。

这种将结构、样式和行为分离的策略，不仅解决了原始问题中关于媒体查询依赖和内联样式的问题，还提供了一个健壮、灵活且用户友好的解决方案，适用于各种响应式网页设计场景。