WordPress中点击按钮显示CSS隐藏的指定div的实现方法

嘿，我来帮你搞定这个点击显示功能！你的需求很明确——已经用CSS隐藏了两个特定表格行（ID为detail-513和detail-515），现在需要给按钮加交互逻辑触发显示。下面分步骤给你讲清楚怎么做：

1. 先优化按钮标识（避免样式冲突） #

你现在按钮的class和隐藏行的class都是testit，容易混淆，建议给按钮换个独特的class，比如show-hidden-rows：

<button class="show-hidden-rows">Show the two hidden rows</button>

2. 用原生JavaScript实现点击逻辑 #

因为你的隐藏元素是<tr>（表格行），显示时要把display设为table-row（而非普通的block）。下面是原生JS代码，直接放在页面底部（比如主题的footer.php里）或者用WordPress的脚本加载方式添加：

// 确保DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮和目标行元素
  const showBtn = document.querySelector('.show-hidden-rows');
  const row513 = document.getElementById('detail-513');
  const row515 = document.getElementById('detail-515');

  // 确保元素都存在时才添加事件
  if (showBtn && row513 && row515) {
    showBtn.addEventListener('click', function() {
      // 显示两个隐藏的表格行
      row513.style.display = 'table-row';
      row515.style.display = 'table-row';

      // 如果需要实现「点击切换显示/隐藏」，替换上面两行为：
      // row513.style.display = row513.style.display === 'none' ? 'table-row' : 'none';
      // row515.style.display = row515.style.display === 'none' ? 'table-row' : 'none';
    });
  }
});

3. 可选：简化你的CSS代码 #

因为ID在页面中是唯一的，你原来的CSS可以简化，不需要加.testit前缀，这样更高效：

#detail-513, #detail-515 {
  display: none;
}

4. 如果你习惯用jQuery（WordPress默认加载） #

如果你的WordPress站点已经加载了jQuery，也可以用更简洁的写法：

jQuery(document).ready(function($) {
  $('.show-hidden-rows').on('click', function() {
    // 直接显示目标行
    $('#detail-513, #detail-515').show();

    // 切换显示/隐藏的话用toggle()：
    // $('#detail-513, #detail-515').toggle();
  });
});

额外提示 #

如果按钮是动态生成的（比如在循环里），可以用事件委托绑定点击事件，避免元素未加载时绑定失败：

// 原生JS事件委托示例
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('show-hidden-rows')) {
    const row513 = document.getElementById('detail-513');
    const row515 = document.getElementById('detail-515');
    row513.style.display = 'table-row';
    row515.style.display = 'table-row';
  }
});

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