如何通过锚点超链接自动展开HTML details元素？WordPress场景求助

绝对可以实现你想要的功能！你遇到的锚点失效+details不自动展开的问题，大概率是WordPress机制干扰原生锚点和details无原生锚点展开逻辑两个原因叠加导致的，下面分步骤解决：

1. 修复锚点滚动失效问题 #

首先排查WordPress相关的干扰因素：

• 检查.htaccess重写规则：WordPress默认重写规则不会破坏锚点，但自定义规则可能导致锚点丢失。确保你的.htaccess中没有过滤#后的内容，默认规则示例：

  <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.php$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.php [L]
  </IfModule>
  

  如果有自定义跳转规则，需添加QSA参数保留锚点，比如：RewriteRule ^(.*)$ /$1 [R=301,L,QSA]。

• 排查主题JS干扰：很多WordPress主题自带的平滑滚动JS可能覆盖原生锚点行为，导致跳转至顶部。可以临时切换到默认主题（如Twenty Twenty-Four）测试，若锚点恢复正常，需修改主题中处理滚动的JS代码，使其支持锚点定位到summary元素。

2. 实现锚点触发details自动展开 #

原生details不会因锚点自动展开，需添加JavaScript代码实现该逻辑。将以下代码添加到页面底部（比如主题的footer.php中，或通过自定义HTML插件插入）：

document.addEventListener('DOMContentLoaded', function() {
  // 处理页面加载时的锚点
  const hash = window.location.hash.slice(1);
  if (hash) {
    const targetSummary = document.getElementById(hash);
    if (targetSummary) {
      const targetDetails = targetSummary.closest('details');
      if (targetDetails) {
        targetDetails.open = true;
        // 滚动到目标元素，确保在视图内
        targetSummary.scrollIntoView({
          behavior: 'smooth', // 可选，开启平滑滚动
          block: 'start'
        });
      }
    }
  }

  // 处理页面内锚点点击事件
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      const hash = this.getAttribute('href').slice(1);
      const targetSummary = document.getElementById(hash);
      if (targetSummary) {
        const targetDetails = targetSummary.closest('details');
        if (targetDetails) {
          targetDetails.open = true;
          // 延迟滚动，确保details展开后位置准确
          setTimeout(() => {
            targetSummary.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
          }, 100);
        }
      }
    });
  });
});

这段代码的作用：

• 页面加载时检测URL锚点，找到对应summary后展开其父details，并滚动到该元素
• 处理页面内锚点点击，先展开目标details再滚动，避免因展开动画导致位置偏移

3. 额外调试技巧 #

如果问题仍存在，可通过浏览器开发者工具（F12）排查：

• 在Console面板输入document.getElementById('am')，确认能找到目标summary元素（若找不到，说明id重复或元素未加载）
• 检查页面内是否有重复的id，重复id会导致锚点失效

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