如何实现点击侧边栏隐藏表格及多表格切换自动关闭当前表格？

问题分析 #

原实现存在三个核心问题：

• 同一按钮点击无法隐藏已显示表格：JS条件判断误用赋值运算符=替代比较运算符，导致逻辑永远执行显示操作；且隐藏逻辑写法错误
• 多按钮切换时未自动关闭当前表格：没有统一管理所有表格的显示状态
• 点击侧边栏未触发表格隐藏：未给侧边栏添加事件监听

修复后完整实现 #

HTML 结构 #

添加多按钮对应不同表格，以及侧边栏元素：

<!-- 侧边栏 -->
<div id="sidebar" class="sidebar">侧边栏内容</div>

<!-- 切换按钮 -->
<button onclick="toggleTable('Patient-Table')">患者表格</button>
<button onclick="toggleTable('Doctor-Table')">医生表格</button>

<!-- 患者表格 -->
<div id="Patient-Table" class="table-container container col-sm-8">
  <div class="table-wrapper">
    <div class="table-title">
      <div class="row">
        <div class="col-sm-6">
          <h2>List of <b> Patients</b></h2>
        </div>
        <div class="col-sm-6">
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </div>
    <div class="tables border shadow border-3 mt-3 mb-5">
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Address</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Low</td>
            <td>Key</td>
            <td>Male</td>
            <td>27</td>
            <td>low.key@gmail.com</td>
            <td>+673668292</td>
            <td>NewyorkUSA</td>
            <td>
              <a class='btn btn-primary btn-sm' href='update'>Update</a>
              <a class='btn btn-danger btn-sm' href='delete'>Delete</a>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>Low</td>
            <td>Key</td>
            <td>Male</td>
            <td>27</td>
            <td>low.key@gmail.com</td>
            <td>+673668292</td>
            <td>NewyorkUSA</td>
            <td>
              <a class='btn btn-primary btn-sm' href='update'>Update</a>
              <a class='btn btn-danger btn-sm' href='delete'>Delete</a>
            </td>
          </tr>
          <tr>
            <td>3 </td>
            <td>Low</td>
            <td>Key</td>
            <td>Male</td>
            <td>27</td>
            <td>low.key@gmail.com</td>
            <td>+673668292</td>
            <td>NewyorkUSA</td>
            <td>
              <a class='btn btn-primary btn-sm' href='update'>Update</a>
              <a class='btn btn-danger btn-sm' href='delete'>Delete</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- 医生表格（示例） -->
<div id="Doctor-Table" class="table-container container col-sm-8">
  <div class="table-wrapper">
    <div class="table-title">
      <h2>List of <b>Doctors</b></h2>
    </div>
    <div class="tables border shadow border-3 mt-3 mb-5">
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>Cardiology</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS 样式 #

统一设置所有表格默认隐藏，添加侧边栏基础样式：

.table-container {
  visibility: hidden;
}

/* 侧边栏样式示例 */
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f8f9fa;
  padding: 20px;
  cursor: pointer;
}

JavaScript 逻辑 #

实现统一的表格切换控制，以及侧边栏点击隐藏功能：

// 切换指定表格的显示/隐藏状态
function toggleTable(targetTableId) {
  const targetTable = document.getElementById(targetTableId);
  const allTables = document.querySelectorAll('.table-container');
  
  // 目标表格隐藏时：先关闭所有表格，再显示目标
  if (targetTable.style.visibility !== 'visible') {
    allTables.forEach(table => table.style.visibility = 'hidden');
    targetTable.style.visibility = 'visible';
  } else {
    // 目标表格已显示时：直接隐藏
    targetTable.style.visibility = 'hidden';
  }
}

// 点击侧边栏隐藏所有表格
document.getElementById('sidebar').addEventListener('click', () => {
  document.querySelectorAll('.table-container').forEach(table => {
    table.style.visibility = 'hidden';
  });
});

关键修复点 #

• 用比较运算符!==替代赋值运算符=，修正条件判断逻辑
• 统一遍历管理所有表格，切换时自动关闭已显示的表格
• 给侧边栏添加点击事件监听，触发全局表格隐藏
• 修正隐藏逻辑：直接设置visibility: hidden，替代错误的remove(visibility)写法

内容的提问来源于stack exchange，提问作者Joe Rick