jQuery 切换/隐藏功能问题求助（附简化HTML代码）

看起来你在实现点击按钮切换表格显示/隐藏时遇到了麻烦，先从你的简化HTML和常见坑点入手，一步步解决：

第一步：先修正无效的HTML结构 #

你提供的代码里有个明显的问题：<p>table junk</p>直接放在<table>标签内部是不符合HTML规范的，表格里只能包含<thead>、<tbody>、<tr>、<td>这类元素。这种无效结构可能会导致DOM解析异常，进而让jQuery选择器失效。另外，注意ID必须唯一，如果你的Journeyman按钮也用了id="button"，这会直接导致选择器出错，建议改用类或者不同的ID。

修正后的基础结构可以改成这样：

<div class="column1" style="flex-grow: 1 !important;">
  <!-- APPRENTICE LIST -->
  <div class="section-toggle" data-target="#apprentice-table">
    <p>Apprentice Header</p>
  </div>
  <table id="apprentice-table" class="section-content">
    <tbody>
      <tr>
        <td>Apprentice table content here</td>
      </tr>
    </tbody>
  </table>

  <!-- JOURNEYMAN LIST -->
  <div class="section-toggle" data-target="#journeyman-table">
    <p>Journeyman Header</p>
  </div>
  <table id="journeyman-table" class="section-content">
    <tbody>
      <tr>
        <td>Journeyman table content here</td>
      </tr>
    </tbody>
  </table>
</div>

第二步：用jQuery实现切换逻辑 #

尽量避免内联onclick，用jQuery的事件绑定更清晰也更容易维护。这里用data-target属性来关联按钮和对应的表格，这样扩展性更好：

// 确保DOM加载完成后再执行代码
$(document).ready(function() {
  // 初始状态：隐藏所有表格（如果需要默认显示可以去掉这行）
  $('.section-content').hide();

  // 绑定切换按钮的点击事件
  $('.section-toggle').on('click', function() {
    // 获取当前按钮对应的目标表格选择器
    const targetTable = $(this).data('target');
    
    // 切换目标表格的显示/隐藏
    $(targetTable).toggle();

    // 可选：如果需要每次只展开一个表格，关闭其他的，加上下面这行
    // $('.section-content').not(targetTable).hide();
  });
});

常见问题排查 #

如果还是不行，检查这几个点：

• jQuery是否正确引入：确保在你的JS代码之前已经加载了jQuery库（比如本地文件或官方CDN）
• 控制台报错：按F12打开浏览器控制台，看有没有红色的错误提示，比如$ is not defined就是没加载jQuery，或者选择器找不到元素
• 元素选择是否正确：在点击事件里加console.log($(targetTable))，看输出的是不是你要操作的表格元素

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