如何在没有JavaScript的情况下实现仅使用CSS的“手风琴”效果？

在没有JavaScript的情况下，我们可以使用纯CSS来实现一个手风琴效果。这主要依靠CSS的:checked伪类和HTML的<input type="radio">或<input type="checkbox">元素来实现。以下是一个具体的实现步骤和示例：

步骤 1: HTML结构

首先，我们需要设置正确的HTML结构。这里我选择使用<input type="checkbox">为例，因为它可以允许多个区域同时展开（如果你希望任何时候只展开一个区域，可以使用<input type="radio">并确保他们有相同的name属性）。

html
<div class="accordion">
    <input type="checkbox" id="section1">
    <label for="section1">Section 1</label>
    <div class="content">
        Content for Section 1
    </div>

    <input type="checkbox" id="section2">
    <label for="section2">Section 2</label>
    <div class="content">
        Content for Section 2
    </div>

    <input type="checkbox" id="section3">
    <label for="section3">Section 3</label>
    <div class="content">
        Content for Section 3
    </div>
</div>

步骤 2: CSS样式

接着，我们需要添加CSS来隐藏内容并使其在相关输入被选中时显示。

css
/* 基础样式 */
.accordion {
    width: 300px;
    border: 1px solid #ccc;
}

.content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* 利用:checked伪类 */
input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]:checked + label + .content {
    max-height: 100px;
}

label {
    display: block;
    padding: 10px;
    background: #eee;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

在这个CSS中，.content默认是隐藏的（max-height: 0;），当相邻的<input>被选中时，.content的最大高度被设置为一个足够展示内容的值（例如100px）。这样，内容就会因为CSS的过渡效果而平滑地展开。

示例效果

在这个示例中，当你点击一个标签时，对应的内容区域会展开或收起。这个效果完全不需要JavaScript，仅用CSS和简单的HTML就可以实现，非常适合简单的交互效果实现。

这种方法的优势在于其简洁性和不依赖JavaScript，可以在禁用JavaScript的环境下工作。此外，它也提供了良好的兼容性和性能。