Bootstrap布局下点击图标后在对应行后插入内容的jQuery需求

我明白你现在的困扰——点击图标后所有内容都堆在12个图标下方，而你想要的是内容精准出现在点击图标所在行的正下方。咱们一步步来调整代码，实现这个效果：

第一步：调整HTML结构 #

首先，我们需要给每个图标所在的行加上标识，同时给每个图标绑定对应内容的ID，还要在每行末尾预留内容显示的容器，另外把所有隐藏的内容模板统一放在页面底部（避免干扰布局）：

<!-- 第一行图标 -->
<div class="row icon-row">
  <div class="col-md-3 text-center p-4 icon-item" data-content-id="content-1">
    <i class="fa fa-icon fa-3x"></i>
    <p>图标1</p>
  </div>
  <div class="col-md-3 text-center p-4 icon-item" data-content-id="content-2">
    <i class="fa fa-icon fa-3x"></i>
    <p>图标2</p>
  </div>
  <div class="col-md-3 text-center p-4 icon-item" data-content-id="content-3">
    <i class="fa fa-icon fa-3x"></i>
    <p>图标3</p>
  </div>
  <div class="col-md-3 text-center p-4 icon-item" data-content-id="content-4">
    <i class="fa fa-icon fa-3x"></i>
    <p>图标4</p>
  </div>
  <!-- 该行的内容显示容器 -->
  <div class="content-container col-12"></div>
</div>

<!-- 第二行图标 -->
<div class="row icon-row">
  <div class="col-md-3 text-center p-4 icon-item" data-content-id="content-5">
    <i class="fa fa-icon fa-3x"></i>
    <p>图标5</p>
  </div>
  <!-- 剩下8个图标同理，每个都加data-content-id -->
  <div class="content-container col-12"></div>
</div>

<!-- 隐藏的内容模板区 -->
<div class="content-templates d-none">
  <div id="content-1" class="content-block p-4 bg-light">
    <h3>内容1</h3>
    <p>这是图标1对应的详细内容，会显示在第一行图标下方</p>
  </div>
  <div id="content-2" class="content-block p-4 bg-light">
    <h3>内容2</h3>
    <p>这是图标2对应的详细内容</p>
  </div>
  <!-- 剩下10个内容块同理，ID和data-content-id对应 -->
</div>

第二步：修改jQuery逻辑 #

接下来我们修改JS代码，实现点击图标时：

1. 清空所有行的内容容器（避免多个内容同时显示）
2. 找到当前图标所在的行
3. 克隆对应内容模板，插入到该行的内容容器中并显示

$(document).ready(function() {
  // 绑定图标点击事件
  $('.icon-item').click(function() {
    // 获取当前图标对应的内容ID
    const targetContentId = $(this).data('content-id');
    // 找到当前图标所在的行
    const $currentRow = $(this).closest('.icon-row');
    // 找到该行的内容容器
    const $contentContainer = $currentRow.find('.content-container');

    // 清空所有行的内容容器，隐藏之前显示的内容
    $('.content-container').empty();

    // 克隆对应内容模板，移除隐藏类，插入到当前行的容器中
    const $targetContent = $(`#${targetContentId}`).clone();
    $targetContent.removeClass('d-none');
    $contentContainer.append($targetContent);
  });
});

为什么这样改？ #

• 原来的代码把所有内容放在所有图标之后，所以点击时内容只能出现在最底部；现在我们给每行单独预留内容容器，让内容精准对应到行。
• 使用closest('.icon-row')可以快速定位点击图标所在的行，确保内容插入到正确位置。
• 克隆内容模板而不是直接移动，保证每次点击都能获取到原始内容，避免重复移动导致模板丢失。

这样调整后，点击任意一行的图标，对应的内容就会以12列单行的形式，显示在该行的正下方啦～

内容的提问来源于stack exchange，提问作者Tariq Ahmed