HTML5Details和Summary标签使用详解

要自定义样式，最常见的就是那个小箭头。默认的箭头样式在不同浏览器里可能有些差异，而且很多时候我们想用自己的图标。你可以通过设置summary元素的list-style: none;来移除默认的箭头，然后利用::before或::after伪元素来添加自定义的图标或者动画效果。

details summary {
  list-style: none; /* 移除默认的箭头 */
  cursor: pointer;
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  position: relative; /* 为伪元素定位 */
}

details summary::before {
  content: '+'; /* 默认显示加号 */
  position: absolute;
  right: 10px;
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  content: '-'; /* 打开时显示减号 */
  transform: rotate(0deg); /* 也可以是旋转效果 */
}

/* 当details打开时，可以给summary或者内部内容添加样式 */
details[open] summary {
  background-color: #e0e0e0;
}

details[open] p {
  padding: 10px;
  border: 1px solid #eee;
  border-top: none;
}

通过details[open]这个属性选择器，你可以针对内容展开时的状态进行样式调整，比如改变背景色，或者让展开的内容有一个特定的边框。

至于行为，虽然它们原生支持折叠，但如果你需要更复杂的联动，比如点击一个

document.querySelectorAll('details').forEach(detail => {
  detail.addEventListener('toggle', () => {
    if (detail.open) {
      console.log('这个details现在是打开的！');
      // 可以在这里添加动画类名，或者关闭其他details
    } else {
      console.log('这个details现在是关闭的！');
    }
  });
});