CSS怎样制作折叠面板效果？details标签美化

<details class="custom-collapsible">
    <summary>点击这里展开/收起内容</summary>
    <div class="collapsible-content">
        <p>这是折叠面板里的内容，可以是文字、图片、列表，甚至其他复杂的结构。这里的内容只有在面板展开时才会显示出来。</p>
        <ul>
            <li>列表项一</li>
            <li>列表项二</li>
            <li>列表项三</li>
        </ul>
    </div>
</details>

<details class="custom-collapsible">
    <summary>另一个折叠面板示例</summary>
    <div class="collapsible-content">
        <p>每个`details`标签都是独立的，互不影响。</p>
    </div>
</details>

.custom-collapsible {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* 确保内容溢出时不会影响圆角 */
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.custom-collapsible summary {
    display: block; /* 确保它能占据整行并应用padding */
    padding: 15px 20px;
    background-color: #ffffff;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    position: relative;
    user-select: none; /* 防止文本被选中 */
    list-style: none; /* 移除浏览器默认的箭头 */
}

/* 针对Firefox的特殊处理，因为list-style: none在Firefox下可能不完全生效 */
.custom-collapsible summary::-webkit-details-marker {
    display: none;
}
.custom-collapsible summary::marker {
    display: none;
}

/* 自定义箭头图标 */
.custom-collapsible summary::after {
    content: '+'; /* 默认是加号 */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    transition: transform 0.3s ease;
    color: #555;
}

/* details展开时，summary的箭头变为减号 */
.custom-collapsible[open] summary::after {
    content: '-'; /* 展开时变为减号 */
    transform: translateY(-50%) rotate(0deg); /* 保持一致，这里不旋转，只是改变内容 */
}

/* 如果想做旋转箭头效果 */
/* .custom-collapsible summary::after {
    content: '▶';
    font-size: 1em;
    transition: transform 0.3s ease;
}
.custom-collapsible[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
} */


.custom-collapsible .collapsible-content {
    padding: 0 20px;
    color: #666;
    /* 动画效果的关键 */
    max-height: 0; /* 默认隐藏 */
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out;
    overflow: hidden; /* 确保内容溢出时隐藏 */
}

.custom-collapsible[open] .collapsible-content {
    max-height: 500px; /* 足够大的值，确保内容能完全显示 */
    opacity: 1;
    padding: 15px 20px; /* 展开后恢复padding */
}

/* 确保展开后内容的底部有足够的空间，避免紧贴边框 */
.custom-collapsible[open] .collapsible-content > *:last-child {
    margin-bottom: 0;
}

list-style: none

list-style: none;

.custom-collapsible summary {
    list-style: none; /* 这行是关键 */
    /* 其他样式... */
}

/* 为了确保兼容性，特别是对一些老旧浏览器或特定情况，
   可以加上针对伪元素的隐藏，虽然现在::marker更通用 */
.custom-collapsible summary::-webkit-details-marker {
    display: none;
}
.custom-collapsible summary::marker {
    display: none;
}

::before

.custom-collapsible summary::after {
    content: '+'; /* 默认状态显示加号 */
    position: absolute;
    right: 20px; /* 定位到右侧 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    font-size: 1.2em;
    transition: content 0.3s ease, transform 0.3s ease; /* 增加过渡效果 */
}

.custom-collapsible[open] summary::after {
    content: '-'; /* 展开时显示减号 */
}

▶

transform: rotate()

.custom-collapsible summary::after {
    content: '▶'; /* 默认是右向箭头 */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg); /* 初始不旋转 */
    transition: transform 0.3s ease; /* 添加旋转过渡 */
}

.custom-collapsible[open] summary::after {
    transform: translateY(-50%) rotate(90deg); /* 展开时旋转90度 */
}

.custom-collapsible .collapsible-content {
    padding: 0 20px; /* 初始padding为0，动画时再展开 */
    max-height: 0; /* 默认隐藏，高度为0 */
    opacity: 0; /* 默认透明度为0 */
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out; /* 定义过渡效果 */
    overflow: hidden; /* 确保内容溢出时被隐藏 */
}

.custom-collapsible[open] .collapsible-content {
    max-height: 500px; /* 展开时给一个足够大的最大高度值，确保内容能完全显示 */
    opacity: 1; /* 展开时透明度为1 */
    padding: 15px 20px; /* 展开后恢复正常的padding */
}

<details class="custom-collapsible">
    <summary>一级标题</summary>
    <div class="collapsible-content">
        <p>这是一级内容。</p>
        <details class="custom-collapsible nested-panel">
            <summary>二级标题</summary>
            <div class="collapsible-content">
                <p>这是二级内容。</p>
                <details class="custom-collapsible nested-panel">
                    <summary>三级标题</summary>
                    <div class="collapsible-content">
                        <p>这是三级内容。</p>
                    </div>
                </details>
            </div>
        </details>
    </div>
</details>

.nested-panel

.custom-collapsible .collapsible-content {
    border-top: 1px dashed #ddd; /* 给内容区域顶部加虚线边框 */
    background-color: #f0f0f0; /* 不同的背景色 */
    border-radius: 0 0 8px 8px; /* 底部圆角 */
    /* 其他样式，如字体大小、行高、颜色等 */
}

document.addEventListener('DOMContentLoaded', () => {
    const detailsElements = document.querySelectorAll('.custom-collapsible');

    detailsElements.forEach(details => {
        details.addEventListener('toggle', (event) => {
            if (details.open) { // 如果当前details被打开
                detailsElements.forEach(otherDetails => {
                    if (otherDetails !== details && otherDetails.open) {
                        otherDetails.open = false; // 关闭其他已打开的details
                    }
                });
            }
        });
    });
});