如何用JavaScript始终显示HTML details标签内的非指定代码内容，同时保留指定代码块的默认展开收起功能？

嘿，这个需求我太懂了！浏览器默认的<details>标签在关闭状态下会藏起除<summary>外的所有内容，你又没法改原始HTML、CSS也搞不定，那咱们就用JS来重写它的行为——只让指定代码块跟着点击切换，其他内容全程保持可见。

核心思路 #

1. 先废掉<details>的默认展开/收起逻辑，这样它就不会自动隐藏内部内容了
2. 监听<summary>的点击事件，手动控制code.language-julia的显示与隐藏
3. 确保<details>里的非代码内容始终处于可见状态

具体实现代码 #

把这段JS代码加到你的页面里就行（比如放到<head>的<script>标签中，加上defer保证DOM加载完成后再执行）：

document.addEventListener('DOMContentLoaded', () => {
  // 遍历页面中所有的details标签
  document.querySelectorAll('details').forEach(details => {
    const summary = details.querySelector('summary');
    const codeBlock = details.querySelector('code.language-julia');
    
    // 如果当前details里没有目标代码块，直接跳过
    if (!codeBlock) return;
    
    // 初始状态：隐藏代码块
    codeBlock.style.display = 'none';
    
    // 阻止details的默认toggle行为，避免它自动隐藏内容
    details.addEventListener('toggle', (e) => {
      e.preventDefault();
    });
    
    // 监听summary的点击事件，手动切换代码块状态
    summary.addEventListener('click', (e) => {
      // 阻止事件冒泡到details，避免触发默认行为
      e.stopPropagation();
      
      if (codeBlock.style.display === 'none') {
        // 显示代码块，同时给details加上open属性保持样式一致
        codeBlock.style.display = 'block';
        details.setAttribute('open', '');
      } else {
        // 隐藏代码块，移除open属性
        codeBlock.style.display = 'none';
        details.removeAttribute('open');
      }
    });
    
    // 确保details内的非代码、非summary内容始终可见
    details.childNodes.forEach(node => {
      if (node !== summary && node !== codeBlock) {
        // 处理元素节点
        if (node.nodeType === Node.ELEMENT_NODE) {
          node.style.display = 'block';
        }
        // 文本节点（比如你的输出内容）不需要额外设置，因为已经禁用了details的默认隐藏
      }
    });
  });
});

效果说明 #

• 页面加载完成后，代码块默认隐藏，其他内容（比如你的"This is the code output..."文本）全程可见
• 点击"Show code"时，代码块展开显示；再次点击则收起隐藏
• 所有内容都保留在<details>标签内部，完全符合你不能移到外部的要求

备注：内容来源于stack exchange，提问作者Antonello