咨询如何用JavaScript实现页面所有父/子DIV的显示与隐藏

你现有的这段JavaScript代码已经能实现单个DIV的显示/隐藏切换，还搭配了Font Awesome图标直观展示状态，基础逻辑很扎实！先把代码清晰展示出来：

function HideShow(e, itm_id) {
  var tbl = document.getElementById(itm_id);
  if (tbl.style.display == ""){
    e.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
    tbl.style.display = "none";
  } else {
    e.innerHTML = "<i class='fa fa-minus' aria-hidden='true'></i>";
    tbl.style.display = "";
  }
}

如何扩展到所有父/子DIV结构 #

如果要让页面中所有父/子DIV都具备这个功能，不需要给每个元素单独绑定事件，推荐用更高效的方式实现：

方案1：事件委托（最优解）

给父容器绑定一个全局事件，通过判断点击的元素触发对应操作，新增的父/子DIV也能自动生效：

<!-- 父容器示例 -->
<div class="toggle-container">
  <!-- 单个父/子区块示例 -->
  <div class="toggle-trigger" data-target="a1">
    <i class="fa fa-minus" aria-hidden="true"></i> 父区块标题1
  </div>
  <div id="a1" class="toggle-content">
    这是子DIV的内容1
  </div>

  <div class="toggle-trigger" data-target="a2">
    <i class="fa fa-minus" aria-hidden="true"></i> 父区块标题2
  </div>
  <div id="a2" class="toggle-content">
    这是子DIV的内容2
  </div>
</div>

// 事件委托实现
document.querySelector('.toggle-container').addEventListener('click', function(e) {
  // 找到点击的触发元素
  const trigger = e.target.closest('.toggle-trigger');
  if (!trigger) return;

  const targetId = trigger.dataset.target;
  const targetDiv = document.getElementById(targetId);
  const icon = trigger.querySelector('i');

  // 切换显示状态与图标
  if (targetDiv.style.display === '') {
    icon.className = 'fa fa-plus';
    targetDiv.style.display = 'none';
  } else {
    icon.className = 'fa fa-minus';
    targetDiv.style.display = '';
  }
});

方案2：批量绑定事件（适合静态页面）

如果页面加载时所有父/子结构都已存在，可以遍历所有触发元素绑定事件：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  const triggers = document.querySelectorAll('.toggle-trigger');
  triggers.forEach(trigger => {
    trigger.addEventListener('click', function() {
      const targetId = this.dataset.target;
      const targetDiv = document.getElementById(targetId);
      const icon = this.querySelector('i');

      if (targetDiv.style.display === '') {
        icon.className = 'fa fa-plus';
        targetDiv.style.display = 'none';
      } else {
        icon.className = 'fa fa-minus';
        targetDiv.style.display = '';
      }
    });
  });
});

注意事项 #

• 确保引入了Font Awesome图标库，否则图标无法正常显示
• 子DIV初始状态如果是显示的，对应图标要默认设为fa-minus；如果初始隐藏，图标设为fa-plus
• 使用dataset.target关联父元素和子DIV，比直接传ID更灵活易维护

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