实现点击表格解释链接在右侧显示带富内容的容器并支持开关功能的问题求助

先梳理下你需求的核心：

• 表格每行的「Explain」链接点击后，在表格右侧展开包含富文本（文字、图片、标题）的说明容器
• 再次点击该链接或其他链接时，关闭已打开的容器

首先分析你现有代码存在的几个关键问题：

1. 硬编码ID无法复用：用button-1、popup-1这种固定ID，只能处理单一行的需求，表格多问题场景没法批量复用
2. 弹窗位置错误：当前span嵌套在表格单元格内，会破坏表格布局，无法实现「表格右侧显示」的效果
3. 缺少关闭与切换逻辑：现有代码只能展开弹窗，不能收起；点击其他链接也不会关闭已打开的弹窗
4. 固定高度动画不灵活：设置固定500px高度，内容少时会有空隙，内容多时会被截断

下面是适配需求的完整修正方案，支持批量复用、正确的右侧定位、开关切换逻辑：

1. HTML 结构（复用版） #

将固定ID替换为类，弹窗单独放在表格外部（避免破坏表格布局），通过data-*属性关联每行与对应说明内容：

<!-- 表格容器：用于定位右侧弹窗 -->
<div class="table-wrapper">
  <!-- 问题表格 -->
  <table class="question-table" border="1">
    <tr>
      <td>Q.1</td>
      <td>A</td>
      <td>B</td>
      <td>❌</td>
      <td><a href="#" class="explain-link" data-qid="1">Explain</a></td>
    </tr>
    <tr>
      <td>Q.2</td>
      <td>C</td>
      <td>C</td>
      <td>✅</td>
      <td><a href="#" class="explain-link" data-qid="2">Explain</a></td>
    </tr>
  </table>

  <!-- 右侧弹窗容器：单独存放，不影响表格布局 -->
  <div class="explain-popup">
    <div class="popup-content" data-target="1">
      <h3>Q.1 答案说明</h3>
      <p>你答错了，错误原因：</p>
      <p>本题考察XX知识点，正确逻辑是XXX，你选择的A选项不符合XX规则，正确答案为B</p>
      <img src="img-explain-q1.jpg" alt="Q1知识点示意图">
    </div>
    <div class="popup-content" data-target="2">
      <h3>Q.2 答案说明</h3>
      <p>回答正确！详细解释：</p>
      <ul>
        <li>知识点1：XX概念的核心是XXX</li>
        <li>知识点2：XX场景下的判断标准是XXX</li>
      </ul>
      <img src="img-explain-q2.jpg" alt="Q2案例示意图">
    </div>
  </div>
</div>

2. CSS 样式（右侧定位+布局适配） #

实现弹窗在表格右侧的固定定位，同时适配富文本内容的显示：

.table-wrapper {
  position: relative;
  display: inline-block;
  margin: 20px;
}

.question-table {
  border-collapse: collapse;
  border: 1px solid #ddd;
}

.question-table td {
  padding: 8px 15px;
  border: 1px solid #ddd;
  text-align: center;
}

/* 右侧弹窗基础样式 */
.explain-popup {
  position: absolute;
  top: 0;
  left: calc(100% + 20px); /* 表格右侧+间距 */
  width: 450px;
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  max-height: 600px;
  overflow-y: auto;
}

/* 弹窗内富文本适配 */
.explain-popup h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.explain-popup img {
  max-width: 100%;
  margin: 10px 0;
  border-radius: 4px;
}

.popup-content {
  display: none;
}

3. JavaScript 逻辑（开关+切换） #

用类选择器实现批量事件绑定，完成「展开/收起/切换」的核心逻辑：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
  $('.explain-link').click(function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    const currentQid = $(this).data('qid');
    const $popup = $('.explain-popup');
    const $targetContent = $(`.popup-content[data-target="${currentQid}"]`);
    const $activeContent = $('.popup-content:visible');

    // 场景1：点击的是已打开的链接 → 关闭弹窗
    if ($activeContent.length && $activeContent.data('target') == currentQid) {
      $popup.slideUp(300);
      $activeContent.hide();
      return;
    }

    // 场景2：点击的是新链接 → 先清空现有内容，再渲染当前内容
    $activeContent.hide();
    $targetContent.show();
    
    // 动画显示弹窗
    $popup.slideDown(300);
  });
});
</script>

额外优化建议 #

1. 行对齐优化：如果需要弹窗和点击行顶部对齐，可以在点击时获取行的offset().top，动态设置弹窗的top值
2. 视觉反馈：给当前激活的「Explain」链接添加active类（比如变色），方便用户识别已打开的问题
3. 异步加载适配：如果说明内容需要从后端获取，可以在点击时通过data-qid请求对应接口，渲染后再显示弹窗

备注：内容来源于stack exchange，提问作者levent001