点击目录切换对应内容的JS实现优化及双击触发问题求助

问题原因说明 #

1. 首次点击需要双击的原因 #

你之前的代码用x.style.display读取样式，这个属性只能拿到元素行内style属性里设置的样式，你初始的display:none是写在CSS样式表中的，所以第一次读取的时候x.style.display是空字符串，判断x.style.display === "none"不成立，会走else分支把元素设为隐藏，第二次点击才能匹配到判断条件，所以需要双击才能触发预期效果。

2. 代码冗余的原因 #

你给每个目录项单独写了处理函数，逻辑完全一致只是操作的元素id不同，本质是没有把公共逻辑抽象出来。

优化实现方案 #

这个方案不管你是10个还是更多目录项，都不需要额外写JS逻辑，新增内容只需要补对应HTML即可。

优化后CSS代码 #

/* 所有内容区块统一设置默认隐藏 */
.content-item {
  display: none;
}
/* 欢迎语默认显示 */
#firstText {
  display: block;
}

优化后HTML代码 #

<div style="background-color: #eee; padding: 10px;">
  <div id="firstText" class="content-item">
    <p>这里是欢迎语内容</p>
  </div>
  <div id="contentOne" class="content-item">
    <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">1. 第一个标题</span></strong></span></p>
    <p>第一个标题的正文内容
    </p>
  </div>
  <div id="contentTwo" class="content-item">
    <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;">2. 第二个标题</span></strong></span></p>
    <p>第二个标题的正文内容
    </p>
  </div>
  <!-- 后续新增内容只需要添加带有content-item类、唯一id的div块即可 -->
</div>

<div>
  <p><span style="font-size: 20pt;"><strong><span style="font-family: Helvetica Neue Condensed,Helvetica Neueu,helvetica,sans-serif;color: #ccc">目录</span></strong></span></p>
  <p>
    <a href="javascript:;" class="toc-link" data-target="contentOne">1. 点击跳转标题1</a><br><br>
    <a href="javascript:;" class="toc-link" data-target="contentTwo">2. 点击跳转标题2</a>
    <!-- 后续新增目录只需要添加带有toc-link类、data-target属性对应内容id的a标签即可 -->
  </p>
</div>

优化后JS代码 #

// 获取所有目录链接和内容区块
const tocLinks = document.querySelectorAll('.toc-link');
const allContent = document.querySelectorAll('.content-item');

tocLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 获取当前点击要触发的内容id
    const targetId = this.dataset.target;
    const targetEle = document.getElementById(targetId);
    // 先隐藏所有内容
    allContent.forEach(item => item.style.display = 'none');
    // 读取元素实际生效的展示状态，判断是显示目标内容还是回到欢迎语
    if (getComputedStyle(targetEle).display === 'none') {
      targetEle.style.display = 'block';
    } else {
      document.getElementById('firstText').style.display = 'block';
    }
  })
})

方案优势 #

• 彻底解决首次点击需要双击的问题，用getComputedStyle读取元素实际生效的样式，不受行内样式限制
• 完全消除冗余代码，新增目录项不需要修改JS和CSS，只需要补对应HTML结构即可
• 维护成本极低，交互逻辑统一控制，调整规则只需要修改一次JS代码

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