如何在点击左侧用户列表时动态显示右侧用户详情-js教程-PHP中文网

如何在点击左侧用户列表时动态显示右侧用户详情

本文讲解如何通过 php 循环预渲染全部用户详情，并结合 javascript 实现点击左侧用户项后，动态切换右侧对应用户数据的显示逻辑，避免重复请求、保持布局稳定且提升交互体验。

本文讲解如何通过 php 循环预渲染全部用户详情，并结合 javascript 实现点击左侧用户项后，动态切换右侧对应用户数据的显示逻辑，避免重复请求、保持布局稳定且提升交互体验。

在构建类似「联系人列表 + 详情面板」的双栏管理界面时（如投资者管理系统），一个常见需求是：左侧列出所有用户，点击任一用户名，右侧实时展示该用户的完整档案信息。但直接将右侧详情嵌入循环会导致 HTML 结构混乱、CSS 样式冲突，且无法实现“单页动态切换”。正确解法不是让右侧随循环“生成多个容器”，而是——预加载所有用户详情为隐藏 DOM 节点，再通过 JS 控制显隐与激活状态。

✅ 推荐实现方案：服务端预渲染 + 客户端动态激活

1. 左侧用户列表（保持不变）

使用原 while 循环渲染用户缩略项，并为每个添加唯一标识：

<a href="javascript:void(0)" class="chat-user" data-user-id="<?php echo $row['inv_id']; ?>">
  <img src="..." alt="..."><h6><?php echo htmlspecialchars($inv['full_name']); ?></h6>
  <span><?php echo htmlspecialchars($inv['mobile']); ?></span>
</a>

✅ 注意：务必对输出内容使用 htmlspecialchars() 防止 XSS。

2. 右侧详情区（关键改造）

不再写死单个用户数据，而是用 PHP 循环一次性生成所有用户的 .chat-list 容器，并统一设为 display: none（或添加 d-none 类）：

<div class="chat-box p-9" style="height: calc(100vh - 428px)" data-simplebar="">
  <?php $InvMeta = mysqli_query($con, "SELECT * FROM investors_meta ORDER BY 1 DESC");
  if ($_SESSION['useradmin'] === 'Investor') {
      $InvMeta = mysqli_query($con, "SELECT * FROM investors_meta WHERE inv_id = " . (int)$_SESSION['uid'] . " ORDER BY 1 DESC");
  }
  while ($row = mysqli_fetch_assoc($InvMeta)) {
      $FetchInvData = mysqli_query($con, "SELECT * FROM users WHERE userId = " . (int)$row['inv_id']);
      $inv = mysqli_fetch_assoc($FetchInvData);
      if (!$inv) continue; // 安全兜底：跳过无匹配用户
  ?><div class="chat-list chat d-none" data-user-id="<?php echo (int)$row['inv_id']; ?>">
      <div class="hstack align-items-start mb-7 pb-1">
        <div class="d-flex align-items-center gap-3">
          <img src="assets/dist/images/profile/user-4.jpg"    style="max-width:90%"   style="max-width:90%" class="rounded-circle" alt="<?php echo htmlspecialchars($inv['full_name']); ?>"><div>
            <h6 class="fw-semibold fs-4 mb-0"><?php echo htmlspecialchars($inv['full_name']); ?></h6>
            <p class="mb-0">— <?php echo htmlspecialchars($inv['role'] ?: 'User'); ?></p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-4 mb-7">
          <p class="mb-1 fs-2">Phone</p>
          <h6 class="fw-semibold mb-0"><?php echo htmlspecialchars($inv['mobile'] ?: '-'); ?></h6>
        </div>
        <div class="col-8 mb-7">
          <p class="mb-1 fs-2">Email</p>
          <h6 class="fw-semibold mb-0">
            <a href="mailto:<?php%20echo%20htmlspecialchars(%24inv['userEmail']);%20?>">
              <?php echo htmlspecialchars($inv['userEmail']); ?></a>
          </h6>
        </div>
        <div class="col-12 mb-9">
          <p class="mb-1 fs-2">Address</p>
          <h6 class="fw-semibold mb-0"><?php echo htmlspecialchars($inv['address'] ?: '-'); ?></h6>
        </div>
      </div>
      <!-- 其他字段同理填充 -->
      <div class="d-flex gap-2 mt-4">
        <button class="btn btn-primary btn-sm edit-btn" data-id="<?php echo (int)$row['inv_id']; ?>">Edit</button>
        <button class="btn btn-outline-danger btn-sm delete-btn" data-id="<?php echo (int)$row['inv_id']; ?>">Delete</button>
      </div>
    </div>
  <?php } ?>
</div>

3. JavaScript 动态激活逻辑（核心）

在页面底部添加轻量脚本，监听点击并切换显示：

<script>
document.addEventListener('DOMContentLoaded', () => {
  // 绑定左侧用户点击事件（事件委托，高效且支持动态新增）
  document.querySelector('.chat-users').addEventListener('click', function(e) {
    const userLink = e.target.closest('.chat-user');
    if (!userLink) return;

    const targetId = userLink.dataset.userId;
    if (!targetId) return;

    // 隐藏所有详情，显示目标详情
    document.querySelectorAll('.chat-list').forEach(el => el.classList.add('d-none'));
    const targetDetail = document.querySelector(`.chat-list[data-user-id="${targetId}"]`);
    if (targetDetail) {
      targetDetail.classList.remove('d-none');
      // 可选：滚动到顶部
      targetDetail.closest('.chat-box').scrollTop = 0;
    }
  });

  // 【增强】首次加载默认显示第一个用户（可选）
  const firstUser = document.querySelector('.chat-users .chat-user');
  if (firstUser && !document.querySelector('.chat-list:not(.d-none)')) {
    firstUser.click();
  }
});
</script>

⚠️ 重要注意事项

SQL 安全：所有 $_SESSION['uid'] 和 $row['inv_id'] 必须强制类型转换为 (int)，杜绝 SQL 注入。
XSS 防护：所有用户输入字段（full_name, mobile, userEmail 等）必须经 htmlspecialchars() 输出。
性能考量：若用户量极大（>500），建议改用 AJAX 按需加载；当前方案适用于中等规模（
无障碍支持：为 .chat-user 添加 role="button" 和 tabindex="0"，并补充键盘事件（Enter/Space 触发）。
样式兼容：确保 .d-none 是 Bootstrap 类（或自定义 display: none !important;），避免被其他 CSS 覆盖。

✅ 总结

该方案以「服务端一次渲染、客户端零请求切换」为核心，兼顾性能、可维护性与用户体验。它规避了将右侧区域强行塞入循环导致的结构污染，也避免了频繁 AJAX 请求带来的延迟与复杂状态管理。只需三步：① 左侧加 data-user-id；② 右侧用循环生成所有 .chat-list 并默认隐藏；③ 用 15 行 JS 实现精准激活——简洁、健壮、专业。