同一页面无JQuery的JS显示隐藏切换问题：多段隐藏文本同时显示

直接给你一套不依赖jQuery的简易实现方案，核心是通过自定义data属性给按钮和对应内容建立关联，实现独立控制：

第一步：HTML结构示例 #

<!-- 第一个表格 -->
<table border="1">
  <tr>
    <td>
      <a href="javascript:void(0)" class="toggle-btn" data-target="content1">展开详情</a>
      <div id="content1" class="toggle-content" style="display: none;">
        这是表格1对应的隐藏文本内容
      </div>
    </td>
  </tr>
</table>

<!-- 第二个表格 -->
<table border="1">
  <tr>
    <td>
      <a href="javascript:void(0)" class="toggle-btn" data-target="content2">展开详情</a>
      <div id="content2" class="toggle-content" style="display: none;">
        这是表格2对应的隐藏文本内容
      </div>
    </td>
  </tr>
</table>

第二步：原生JS逻辑 #

// 获取所有切换按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');

// 给每个按钮绑定点击事件
toggleBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 通过data-target属性找到对应要控制的内容元素
    const targetId = this.getAttribute('data-target');
    const targetContent = document.getElementById(targetId);
    
    if (targetContent) {
      // 切换显示/隐藏状态
      if (targetContent.style.display === 'none') {
        targetContent.style.display = 'block';
        this.textContent = '收起详情';
      } else {
        targetContent.style.display = 'none';
        this.textContent = '展开详情';
      }
    }
  });
});

关键点说明 #

• 用data-target属性把按钮和对应的隐藏内容绑定，每个按钮对应唯一的内容ID，确保独立控制
• 初始状态通过style="display: none"隐藏内容，也可以用CSS类统一控制（比如定义.hidden { display: none; }，切换时添加/移除类）
• 点击按钮时同步切换按钮文字，提升用户体验

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