HTML5的Details和Summary标签怎么用？如何实现折叠内容？

<details>
  <summary>点我查看更多信息</summary>
  <p>这里是隐藏起来的内容，只有点击了上面的标题才会显示出来。你可以放文字、图片，甚至其他HTML元素。</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</details>

<details open>
  <summary>这个抽屉默认是打开的</summary>
  <p>通过在`details`标签上添加`open`属性，可以控制它在页面加载时就是展开状态。</p>
</details>

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;
}

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