如何实现局部可见、点击「更多」展开的页面视图？

原生HTML/CSS/JS基础实现 #

这是最通用的无框架方案：

结构与样式 #

<div class="content-wrap">
  <div class="preview-text">这里是默认展示的精简内容，只显示开头部分...</div>
  <div class="full-text" id="fullText">
    这里是点击「更多」后要展示的完整内容，包含所有细节、补充说明等，长度不限。
  </div>
  <button id="toggleBtn">更多</button>
</div>

/* 初始隐藏完整内容 */
.full-text {
  display: none;
  margin-top: 12px;
  line-height: 1.6;
}
/* 显示状态的类 */
.full-text.expanded {
  display: block;
}

交互逻辑 #

const toggleBtn = document.getElementById('toggleBtn');
const fullText = document.getElementById('fullText');

toggleBtn.addEventListener('click', () => {
  fullText.classList.toggle('expanded');
  // 切换按钮文字
  toggleBtn.innerText = fullText.classList.contains('expanded') ? '收起' : '更多';
});

如果需要平滑展开的动画效果，把CSS改成这样：

.full-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  margin-top: 12px;
  line-height: 1.6;
}
.full-text.expanded {
  max-height: 2000px; /* 设一个足够大的值，确保能容纳所有内容 */
}

React框架下的实现 #

如果用React开发，直接用状态控制显示：

import { useState } from 'react';

export default function ContentCollapse() {
  const [showFull, setShowFull] = useState(false);

  return (
    <div className="content-wrap">
      <div className="preview-text">默认展示的精简内容...</div>
      {showFull && (
        <div className="full-text">完整内容区域，所有隐藏的内容都在这里...</div>
      )}
      <button onClick={() => setShowFull(!showFull)}>
        {showFull ? '收起' : '更多'}
      </button>
    </div>
  );
}

常见问题排查 #

• 检查元素选择器：确保JS能正确获取到按钮和内容容器，避免ID重复、类名拼写错误
• 排查样式冲突：用浏览器开发者工具查看元素的实际样式，确认没有其他CSS规则覆盖了display或max-height属性
• 确认事件绑定：检查按钮的点击事件是否正常触发，有没有被父元素的事件阻止冒泡

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