原生文本智能折叠与定位方案

抱歉，刚才由于排版渲染的问题导致代码显示不全。这次我为您提供纯原生（无 Tailwind 依赖）的完整代码。此方案已经为您写好了高度智能检测逻辑：如果内容字数较少、高度未超过限制，会自动隐藏“展开/收起”按钮；只有当内容较多时，按钮才会显示。

你可以直接将下面的完整代码替换到你的页面中：

1. HTML & CSS 结构

请将这一整段代码复制并替换您现有的“提问背景”模块：

<!-- 1. 顶部定位锚点 -->
<div id="question-top"></div>

<!-- 2. 提问背景主容器 -->
<div class="custom-question-card">
  <div class="custom-card-title">提问背景 Question:</div>
  
  <!-- 内容包裹层，默认限制最大高度并隐藏溢出 -->
  <div id="content-outer" class="content-outer-wrapper">
    <div id="content-body" class="msg-content-body">
      {{.Article.Question}}
    </div>
  </div>
  
  <!-- 展开/收起按钮：默认隐藏，通过 JS 动态控制显示 -->
  <button id="toggle-btn" class="custom-toggle-btn" onclick="toggleContent()" style="display: none;">
    展开全部
  </button>
</div>

<!-- 3. 原生 CSS 样式（不依赖任何第三方库） -->
<style>
  /* 外层卡片样式 */
  .custom-question-card {
    background-color: #f9fafb; /* 浅灰色背景 */
    border-left: 4px solid #3b82f6; /* 蓝色左边框 */
    padding: 16px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  /* 标题样式 */
  .custom-card-title {
    font-size: 12px;
    font-weight: bold;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }

  /* 外部限制容器 */
  .content-outer-wrapper {
    max-height: 160px; /* 默认折叠状态下的最大高度（可根据需要修改） */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* 平滑过渡动画 */
  }

  /* 展开状态的类 */
  .content-outer-wrapper.expanded {
    max-height: none; /* 取消高度限制 */
  }

  /* 文本主体样式 */
  .msg-content-body {
    white-space: pre-wrap;
    word-break: break-all;
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
  }

  @media (min-width: 768px) {
    .msg-content-body {
      font-size: 15px;
    }
  }

  /* 居中的折叠/展开按钮 */
  .custom-toggle-btn {
    display: block;
    margin: 12px auto 0 auto; /* 自动外边距实现水平居中 */
    padding: 6px 16px;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 20px; /* 圆角按钮 */
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s;
  }

  .custom-toggle-btn:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
  }
</style>

2. JavaScript 控制逻辑

请将以下 JS 脚本放到页面的 <body> 底部（或您现有的 <script> 标签内）：

function toggleContent() { 
  const outer = document.getElementById('content-outer');
  const btn = document.getElementById('toggle-btn');
  const anchor = document.getElementById('question-top');

  // 判断当前是否已经是展开状态
  const isExpanded = outer.classList.contains('expanded');

  if (isExpanded) {
    // 1. 如果是展开的，执行“收起”操作
    outer.classList.remove('expanded');
    btn.textContent = '展开全部';
    
    // 2. 关键：平滑滚动回顶部锚点位置
    anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
  } else {
    // 1. 如果是收起的，执行“展开”操作
    outer.classList.add('expanded');
    btn.textContent = '收起内容';
  }
}

// 页面加载完毕后，自动检测内容高度
document.addEventListener('DOMContentLoaded', () => {
  const outer = document.getElementById('content-outer');
  const body = document.getElementById('content-body');
  const btn = document.getElementById('toggle-btn');

  // 判断实际内容高度是否超过了我们限制的 160px
  if (body.scrollHeight > 160) {
    // 内容过多，显示“展开全部”按钮
    btn.style.display = 'block';
  } else {
    // 内容很少，不需要折叠，直接让外部容器自适应高度
    outer.style.maxHeight = 'none';
    btn.style.display = 'none';
  }
});

这样修改后的好处：

智能自适应：如果后端传过来的 {{.Article.Question}} 只有寥寥几字，页面上根本不会出现“展开/收起”按钮，布局干净清爽。
精准回滚：当内容很长，用户看完点击“收起内容”时，页面会平滑地滚动回到 question-top 锚点处，绝不会迷失在网页底部。
零外部依赖：彻底去除了 Tailwind CSS CDN 引入，纯原生 CSS 控制过渡动画和按钮居中，性能更好，且不会触发任何浏览器拦截警告。