HTML详情标签使用教程：details和summary详解

自定义样式主要围绕这两个标签本身以及它们内部的元素。最常见的需求就是改变那个默认的展开/折叠指示符。这个指示符其实是由summary元素的::marker伪元素控制的。

你可以这样把它干掉：

summary::-webkit-details-marker {
  display: none; /* 针对WebKit内核浏览器，如Chrome, Safari */
}

summary::marker {
  display: none; /* 标准写法，针对Firefox等 */
}

把默认的marker去掉后，你就可以用CSS的::before或::after伪元素来创建自己的指示符了，比如一个加号和减号：

summary {
  list-style: none; /* 移除默认列表样式，某些浏览器可能需要 */
  cursor: pointer; /* 提示用户可点击 */
  position: relative;
  padding-left: 20px; /* 为自定义指示符留出空间 */
}

summary::before {
  content: '+'; /* 默认显示加号 */
  position: absolute;
  left: 0;
  font-weight: bold;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  content: '-'; /* 展开时显示减号 */
  transform: rotate(0deg); /* 确保形状不变，只是内容变了 */
}

/* 还可以给summary添加hover效果，或者改变文字颜色等等 */
summary:hover {
  color: #007bff;
}

当然，你也可以直接给

const detailsElements = document.querySelectorAll('details');

detailsElements.forEach(details => {
  details.addEventListener('toggle', () => {
    if (details.open) {
      // 内容展开了
      console.log('内容已展开:', details.querySelector('summary').textContent);
      // 可以在这里添加展开动画类，或者加载数据
      // details.classList.add('is-open');
      // loadContent(details); // 假设有个函数用来加载内容
    } else {
      // 内容折叠了
      console.log('内容已折叠:', details.querySelector('summary').textContent);
      // details.classList.remove('is-open');
    }
  });
});

const detailsGroups = document.querySelectorAll('.accordion-group details'); // 假设你的手风琴都在一个特定类名下

detailsGroups.forEach(currentDetails => {
  currentDetails.addEventListener('toggle', () => {
    if (currentDetails.open) {
      detailsGroups.forEach(otherDetails => {
        if (otherDetails !== currentDetails && otherDetails.open) {
          otherDetails.open = false; // 关闭其他已展开的details
        }
      });
    }
  });
});