如何在Weebly中添加手风琴内容切换小部件

手风琴小部件允许您在有限的空间内添加大量内容，感兴趣的用户可以展开标题以查看相应的内容。在我们之前的文章中，我们讨论了如何使用 Weebly 从 App Center 提供的免费手风琴应用程序以及一些自定义选项。在本文中，让我们讨论如何在 Weebly建站中创建和添加 CSS 手风琴内容切换小部件。

推荐：如何修复Windows Valorant中语音聊天不起作用的问题

尽管手风琴使用 jQuery 用户界面小部件很受欢迎，但也可以使用 CSS 制作手风琴而无需脚本。这有助于页面加载更快，并使用 CSS 轻松进行自定义。该小部件包含每个手风琴块的三个元素——标题、箭头和正文内容。您可以通过简单的 CSS 控制小部件的所有元素，并根据需要进行自定义。基本上，我们使用输入类型的列表作为复选框来控制手风琴的行为。

CSS 手风琴将如下所示。

复制以下 CSS 代码并粘贴到您的 Weebly 网站页面的“页面 > 选择页面 > SEO 设置”下的“标题代码”部分。为了便于理解，我们用注释突出显示了标题和正文样式。例如，我们使用浅绿色作为标题背景颜色，字体大小为 20 像素，粗细为 500。您可以自定义这些参数以适合您网站的主题和布局。同样，手风琴的主体使用浅灰色作为背景，字体大小为 16px。您也可以根据需要自定义此设置。

<style>
/* Heading Style Start */ 
.accordion-heading {
background-color: lightgreen;
display: block;
padding: 10px;
position: relative;
cursor: pointer;
font-size: 20px;
font-weight: 500;
}
/* Heading Style End */ 

/* Body Style Start */
.accordion-body {
max-height: 0;
margin-bottom: 2px;
overflow: hidden;
font-size: 16px;
line-height: 1.5;
text-align: justify;
background-color: lightgrey;
transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}
/* Body Style End */

.accordion {
border: 1px solid white;
margin: 0 auto;
list-style: none;
overflow: hidden;
}

.accordion > * + * {
border-top: 1px solid white;
}

.accordion-input:checked ~ .accordion-body {
background-color: lightgrey;
padding: 10px;
max-height: 1000px;
transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.accordion-input:checked ~ .accordion-heading > .accordion-heading-btn {
transform: rotate(0);
}

.accordion-heading-btn {
display: block;
width: 30px;
position: absolute;
top: 10px;
right: 0;
pointer-events: none;
transition: transform .3s ease;
transform: rotate(-180deg);
text-align: center;
font-size: 14px;
line-height: 1;
}

.accordion-input { 
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1;
overflow: hidden;
position: absolute;
left: -9999px;
}
</style>

您还可以在“设置 > SEO > 标头代码”部分下添加 CSS，或者将 CSS 添加到不带

如何在Weebly中添加手风琴内容切换小部件