自定义 HTML代码，望在wordpress网站实现手风琴/切换效果，默认设置为不展开。

要在WordPress网站上使用自定义 HTML 代码实现手风琴/切换效果，并且默认设置为不展开，最简洁且无需额外 JavaScript 的方式是利用 HTML5 的 <details> 和 <summary> 标签。

这两个标签是浏览器原生支持的，用于创建可展开/折叠的区块。默认情况下，只要不添加 open 属性，它们就是折叠状态的。

我们将通过以下步骤实现：

1. 编写 HTML 结构，使用 <details> 和 <summary>。
2. 添加 CSS 样式，使其看起来像一个手风琴，并移除浏览器默认的展开/折叠图标，替换为自定义的。

步骤 1: 编写自定义 HTML 结构

你可以在 WordPress 古腾堡编辑器的“自定义 HTML”块中插入以下代码。

<div class="my-custom-accordion">

    <details class="accordion-item">
        <summary class="accordion-header">标题 1: 点击展开</summary>
        <div class="accordion-content">
            <p>这是标题 1 的内容，默认是折叠的。</p>
            <p>你可以在这里放置任何 HTML 内容，比如文本、图片、链接等。</p>
        </div>
    </details>

    <details class="accordion-item">
        <summary class="accordion-header">标题 2: 另一个可折叠项</summary>
        <div class="accordion-content">
            <p>这是标题 2 的内容。</p>
            <ul>
                <li>列表项 A</li>
                <li>列表项 B</li>
            </ul>
        </div>
    </details>

    <details class="accordion-item">
        <summary class="accordion-header">标题 3: 默认也是折叠的</summary>
        <div class="accordion-content">
            <p>这是标题 3 的内容。</p>
            <p>你可以添加更多的段落、图片、嵌入视频等。</p>
        </div>
    </details>

</div>

代码解释：

• <div class="my-custom-accordion">: 这是一个容器，用于包裹整个手风琴组件，方便整体布局和样式控制。
• <details class="accordion-item">: 这是每一个手风琴的独立项。注意，这里没有 open 属性，所以它默认是折叠的。
• <summary class="accordion-header">: 这是手风琴项的标题，用户点击这里会切换展开/折叠状态。它必须是 <details> 标签的第一个子元素。
• <div class="accordion-content">: 这是手风琴项展开后显示的内容区域。它紧跟在 <summary> 之后，且在 <details> 内部。

步骤 2: 添加 CSS 样式

你需要将以下 CSS 代码添加到你的 WordPress 网站的“额外 CSS”中。

1. 登录你的 WordPress 后台。
2. 前往 外观 > 自定义。
3. 点击左侧菜单中的“额外 CSS”。
4. 将以下 CSS 代码复制并粘贴到文本框中。
5. 点击“发布”保存更改。

/* 整个手风琴容器 */
.my-custom-accordion {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden; /* 确保内容在圆角内 */
    margin-bottom: 20px; /* 与下方内容的间距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 轻微阴影效果 */
}

/* 单个手风琴项 */
.accordion-item {
    border-bottom: 1px solid #eee; /* 项之间的分隔线 */
}

/* 最后一个项不需要底边框，避免多余的线条 */
.accordion-item:last-child {
    border-bottom: none;
}

/* 手风琴头部（标题）样式 */
.accordion-header {
    display: block; /* 确保标题占据整行 */
    padding: 15px 20px;
    background-color: #f7f7f7;
    color: #333;
    font-weight: bold;
    cursor: pointer; /* 鼠标悬停时显示手型，表示可点击 */
    position: relative; /* 用于定位自定义的展开/折叠图标 */
    user-select: none; /* 防止文本被选中 */
    transition: background-color 0.2s ease; /* 鼠标悬停时的过渡效果 */
}

/* 鼠标悬停在标题上时的样式 */
.accordion-header:hover {
    background-color: #eeeeee;
}

/* 移除浏览器默认的展开/折叠小箭头 */
.accordion-header::-webkit-details-marker, /* 针对WebKit浏览器 */
.accordion-header::marker { /* 标准属性 */
    display: none;
}

/* 自定义展开/折叠图标（使用伪元素） */
.accordion-header::after {
    content: '+'; /* 默认显示加号（折叠状态） */
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    font-size: 1.2em;
    font-weight: normal; /* 确保图标字体粗细正常 */
    transition: transform 0.2s ease-in-out; /* 展开时图标旋转的过渡效果 */
}

/* 当手风琴项展开时，将图标变为减号 */
.accordion-item[open] > .accordion-header::after {
    content: '-'; /* 展开时显示减号 */
    transform: translateY(-50%) rotate(0deg); /* 保持一致，也可以旋转 */
}

/* 手风琴内容区域样式 */
.accordion-content {
    padding: 0 20px; /* 初始时上边距为0，方便展开动画 */
    background-color: #fff;
    max-height: 0; /* 初始高度为0，实现折叠 */
    overflow: hidden; /* 隐藏超出内容 */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* 动画效果 */
}

/* 当手风琴项展开时，显示内容并恢复正常填充 */
.accordion-item[open] > .accordion-content {
    max-height: 500px; /* 设置一个足够大的高度，确保所有内容都能显示 */
    padding: 15px 20px 20px; /* 展开时恢复正常填充 */
}

/* 针对内容区内部的元素添加一些通用样式，防止和主题样式冲突 */
.accordion-content p:last-child,
.accordion-content ul:last-child,
.accordion-content ol:last-child {
    margin-bottom: 0; /* 移除内容底部多余的空白 */
}

工作原理和注意事项：

1. 原生 HTML <details> 和 <summary>： 这是 HTML5 的标准元素，现代浏览器都支持。它们提供了开箱即用的展开/折叠功能，无需任何 JavaScript。
2. 默认折叠： 只要在 <details> 标签中不添加 open 属性，它就默认是折叠状态。当用户点击 <summary> 时，浏览器会自动添加或移除 open 属性，从而控制内容的显示/隐藏。
3. CSS 控制样式：
   • 我们使用 display: none; 配合 ::-webkit-details-marker 和 ::marker 伪元素来移除浏览器默认的展开/折叠小三角。
   • 然后，通过 ::after 伪元素来自定义显示 + 和 - 号作为展开/折叠图标。
   • max-height 属性用于在内容区域实现平滑的展开/折叠动画。当 details 标签获得 open 属性时，我们将其内部的 accordion-content 的 max-height 设定一个足够大的值，使其内容能够完全显示。
4. 自定义 CSS 类： 我们使用了 my-custom-accordion、accordion-item、accordion-header 和 accordion-content 等类名，这些类名可以让你更精细地控制手风琴的每一个部分。
5. 清除缓存： 在添加或修改 CSS 代码后，如果你的网站使用了缓存插件（如 WP Super Cache、WP Rocket、LiteSpeed Cache 等）或 CDN，请务必清除所有缓存，然后刷新页面以查看效果。

这种方法非常推荐，因为它利用了浏览器原生的能力，代码量少，加载速度快，并且易于维护。

本课程参考文献：[点击查看]

1、国务院.中国儿童发展纲要（2021-2030年），2021.
2、联合国教科文组织.国际性教育技术指导纲要（修订版）中文版，2018.
3、Debra W. Haffner.From Diapers to Dating : A Parent’s Guide to Raising Sexually Healthy Children.Publisher:Newmarket Press,2008.中文名《从尿布到约会》
4、潘绥铭，黄盈盈.性社会学.北京：中国人民大学出版社，2011.
5、WHO Regional Office for Europe and BZgA. (2010). Standards for Sexuality Education in Europe.
世卫组织欧洲区域办事处和BZgA,(2010).欧洲性教育标准.
6、The Sexuality Information and Education Council of the United States (2004). Guidelines for Comprehensive Sexuality Education (3rd edition), New York National Guidelines Task Force.
美国性信息与教育委员会（2004）.全面性教育指南（第三版）幼儿园至12年级.纽约国家指南工作组.
7、Clint E. Bruess,Jerrold S. Greenberg.Sexuality Education: Theory and Practice.Publisher:Jones and Bartlett Publishers,2004.
中文名《性教育：理论与实践》（第四版）
8、厚生労働省.乳幼児期の性に関する情報提供―保健師や親子に関わる専門職のための手引き
《向婴幼儿提供性信息》- 为保健师等亲子工作者提供的指南