同name属性的HTML details标签在部分设备和Firefox中无法自动关闭问题问询

1. 这是否属于Bug？ #

根据WHATWG和MDN的规范，拥有相同name属性的<details>元素应当具备互斥展开特性——打开其中一个时，其他同name的元素需自动关闭。而Firefox及部分苹果移动设备（iPhone、iPad）未实现该行为，这属于浏览器兼容性Bug，因为违反了既定的HTML规范要求。

2. 无需JavaScript的解决方案 #

由于原生<details>的该特性存在浏览器兼容问题，你可以通过纯HTML+CSS模拟互斥折叠面板的效果，完全不需要JavaScript，适配所有主流浏览器：

实现思路 #

利用单选按钮（<input type="radio">）的天然互斥选中特性，配合CSS选择器控制内容区域的显示与隐藏，模拟原生<details>的折叠交互。

完整代码示例 #

<style>
  /* 隐藏单选按钮 */
  .details-group .radio-btn {
    display: none;
  }

  /* 模拟summary的样式与交互 */
  .details-summary {
    cursor: pointer;
    padding: 0.5rem;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px 4px 0 0;
    margin-top: 0.5rem;
  }

  /* 默认隐藏内容区域 */
  .details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 0.5rem;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 4px 4px;
  }

  /* 选中单选按钮时显示对应内容 */
  .radio-btn:checked ~ .details-content {
    max-height: 200px; /* 根据实际内容调整最大高度 */
    padding: 0.5rem;
  }
</style>

<div class="details-group">
  <!-- 第一个折叠面板 -->
  <input type="radio" name="details-group-1" id="detail-1" class="radio-btn">
  <label for="detail-1" class="details-summary">面板1：项目概述</label>
  <div class="details-content">
    这里是项目概述的详细内容，包含项目背景、目标受众等核心信息。
  </div>

  <!-- 第二个折叠面板 -->
  <input type="radio" name="details-group-1" id="detail-2" class="radio-btn">
  <label for="detail-2" class="details-summary">面板2：技术栈说明</label>
  <div class="details-content">
    本项目使用HTML5、CSS3构建静态页面，无需JavaScript即可实现核心交互。
  </div>

  <!-- 第三个折叠面板 -->
  <input type="radio" name="details-group-1" id="detail-3" class="radio-btn">
  <label for="detail-3" class="details-summary">面板3：部署指南</label>
  <div class="details-content">
    可直接将静态文件上传至任意静态托管平台（如GitHub Pages、Netlify）完成部署。
  </div>
</div>

方案优势 #

• 完全基于HTML+CSS实现，无JavaScript依赖，适配所有主流浏览器
• 单选按钮的互斥特性天然保证了同组面板的互斥展开
• 通过CSS过渡动画实现流畅的折叠/展开效果，贴近原生<details>的交互体验

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