表格内嵌入Collapsible可折叠组件的交互与布局问题求解

问题根因 #

你遇到的两个现象都有明确的技术原因：

1. 表格场景下折叠失效：HTML语法不规范，<tr>的直接子元素只能是<td>或<th>，你把<p class="content-two">放在<tr>和<td>之间，浏览器渲染时会自动把这个p标签移出表格结构，导致JS选择器找不到要操作的内容，点击自然没有折叠效果。
2. 点击回弹：触发折叠的区域内嵌了<a href="#">空链接，点击后触发默认跳转页首的行为，就是你看到的“回弹”效果。
3. div场景下单列排布：没有给容器加多列布局的CSS规则，块级元素默认垂直排列。

解决方案1：修正表格结构实现需求 #

只需要调整HTML结构，把折叠类加在需要隐藏的整行<tr>上即可，原有JS逻辑不用改：

修正后代码 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" width="750">
  <tr>
    <td align="center" colspan="3">
      <!-- 去掉空a标签，加鼠标指针样式避免回弹 -->
      <p class="expand-two" style="cursor: pointer;">
        <img src="https://www.mywebsite.net/random/creative.png" alt="折叠按钮"><br><br>
      </p>
    </td>
  </tr>
  <!-- 折叠类直接加在整行tr上 -->
  <tr class="content-two">
    <td width="33%" align="center" valign="top">
      <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
        <font color="#34a6a7">[ c h a o s ]</font>
      </a><br>
      <font color="#34a6a7">$ROOMNAME sinnerssaints$</font><br>$USERLIST sinnerssaints$<br>
    </td>
    <td width="33%" align="center" valign="top">
      <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">
        <font color="#34a6a7">[ r e a l i t i e s ]</font>
      </a><br>
      <font color="#34a6a7">$ROOMNAME sagas_untold$</font><br>$USERLIST sagas_untold$<br>
      <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble$</i></font><br>$USERLIST sagbloodonthemarble$<br>
      <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar$</i></font><br>$USERLIST sagasvalar$<br>
    </td>
    <td width="33%" align="center" valign="top">
      <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">
        <font color="#34a6a7">[ w a r z o n e ]</font>
      </a><br>
      <font color="#34a6a7">$ROOMNAME parabellum$</font><br>$USERLIST parabellum$<br>
    </td>
  </tr>
</table>

补充CSS

/* 修正表格行动画切换时的布局错乱问题 */
.content-two {
  display: none; /* 默认收起，不需要可以删除 */
}
tr.content-two[style*="display: block"] {
  display: table-row !important;
}

解决方案2：CSS Grid实现三列布局（更推荐） #

如果不想用表格，用Grid布局更灵活，后续新增内容会自动按每行3个排布，不需要手动写<tr>标签，折叠功能完全正常：

代码示例 #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width: 750px;">
  <div class="expand-two" style="text-align: center; cursor: pointer;">
    <img src="https://www.mywebsite.net/random/creative.png" alt="折叠按钮"><br><br>
  </div>
  <div class="content-two grid-container">
    <div class="grid-item" align="center" valign="top">
      <a href="http://www.mywebsite.net/random/sinnerssaints" title="Sinners and Saints: Room Leader OMEGA">
        <font color="#34a6a7">[ c h a o s ]</font>
      </a><br>
      <font color="#34a6a7">$ROOMNAME sinnerssaints$</font><br>$USERLIST sinnerssaints$<br>
    </div>
    <div class="grid-item" align="center" valign="top">
      <a href="http://www.mywebsite.net/random/sagas_untold" title="Saga's Untold: Room Leader AETERNUM">
        <font color="#34a6a7">[ r e a l i t i e s ]</font>
      </a><br>
      <font color="#34a6a7">$ROOMNAME sagas_untold$</font><br>$USERLIST sagas_untold$<br>
      <font size="-1" color="#CFA06B"><i>$ROOMNAME sagbloodonthemarble$</i></font><br>$USERLIST sagbloodonthemarble$<br>
      <font size="-1" color="#CFA06B"><i>$ROOMNAME sagasvalar$</i></font><br>$USERLIST sagasvalar$<br>
    </div>
    <div class="grid-item" align="center" valign="top">
      <a href="http://www.mywebsite.net/random/parabellum" title="Parabellum: Room Leader COVET">
        <font color="#34a6a7">[ w a r z o n e ]</font>
      </a><br>
      <font color="#34a6a7">$ROOMNAME parabellum$</font><br>$USERLIST parabellum$<br>
    </div>
    <!-- 后续新增内容自动按三列换行，无需调整结构 -->
  </div>
</div>

CSS

.content-two {
  display: none; /* 默认收起，不需要可以删除 */
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
.grid-item {
  padding: 8px;
  vertical-align: top;
}

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