点击指向隐藏区块内的锚链接，如何触发区块展开功能？

问题分析 #

1. 锚链接指向的是区块内子元素而非折叠的section本身，:target伪类无法触发section展开。
2. 原生JS判断i.style.display时，CSS设置的display:none不会体现在元素行内style属性中，导致首次点击逻辑错误，无法正常展开。

解决方案（优先使用jQuery） #

以下是重构后的完整代码，同时解决两个问题：

HTML 结构优化

给标题添加data-target属性关联对应折叠区块，统一处理不同层级标题（H1/H2/H3）：

<p>Test link: <a href="#SpecificTopic">Click Here</a></p>

<h1 class="secToggleHeading" data-target="#secSubject1">Header 1</h1>
<section class="secToggle" id="secSubject1">
  <p>Some content</p>
  <p id="SpecificTopic">Specific Topic</p>
  <p>Some other content</p>
  
  <!-- 示例子区块 -->
  <h2 class="secToggleHeading" data-target="#secSubTopic">Sub Header</h2>
  <section class="secToggle" id="secSubTopic">
    <p id="DeepTopic">Deep nested content</p>
  </section>
</section>

CSS 调整

保留原有提示样式，移除无效的:target和:focus-within规则：

.secToggle {
  display: none;
  border: 1px dotted transparent;
  border-radius: 10px;
  padding: 10px; /* 增加内边距让hover边框更明显 */
}

.secToggle:hover {
  border-color: black;
}

.secToggleHeading:hover {
  cursor: pointer;
  text-decoration: underline; /* 增加hover下划线强化可点击提示 */
}

jQuery 逻辑实现

$(document).ready(function() {
  // 处理标题点击切换折叠/展开
  $('.secToggleHeading').on('click', function() {
    const targetSection = $($(this).data('target'));
    targetSection.toggle(); // 直接用toggle方法替代手动判断，简洁可靠
  });

  // 处理锚链接跳转时展开对应区块
  function handleAnchorHash() {
    const hash = window.location.hash;
    if (hash) {
      const targetElement = $(hash);
      // 找到目标元素所在的所有父级折叠区块并展开
      targetElement.parents('.secToggle').show();
      // 滚动到目标元素（可选，确保锚点定位正确）
      setTimeout(() => {
        $('html, body').scrollTop(targetElement.offset().top);
      }, 100);
    }
  }

  // 页面加载时检查hash
  handleAnchorHash();
  // 监听hash变化（比如页面内锚点跳转）
  $(window).on('hashchange', handleAnchorHash);
});

关键改进点 #

• 用data-target替代直接传递元素，代码更灵活，支持动态生成的区块。
• 使用jQuery的toggle()和show()方法，避免原生JS判断style属性的坑，解决首次点击无效问题。
• 通过parents('.secToggle')自动找到目标元素的所有父级折叠区块，支持多层嵌套的子区块展开。
• 监听hashchange事件，确保页面内锚点跳转时也能触发展开逻辑。

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