纯css实现手风琴效果_创建纯CSS手风琴的4种方法

内容手风琴是一种有用的设计模式。 您可以将它们用于许多不同的事物：用于菜单，列表，图像，文章摘录，文本片段甚至视频

那里的大多数手风琴都依赖JavaScript，主要是jQuery ，但是由于高级CSS3技术的广泛使用，我们还可以找到仅使用HTML和CSS的精美示例，从而可以在禁用JavaScript的环境中访问它们。

创建仅CSS的手风琴可能是一项艰巨的任务，因此在本文中，我们将尝试了解开发人员在需要创建时要使用的主要概念 。

在创建仅CSS的选项卡时，通常有两种主要方法，每种方法都有两个经常使用的情况。 第一种方法利用隐藏的表单元素 ，而第二种方法利用CSS伪选择器 。

1.单选按钮方法

单选按钮方法将隐藏的单选输入和相应的标签添加到手风琴的每个选项卡。 逻辑很简单：当用户选择一个选项卡时，他们基本上会检查属于该选项卡的单选按钮，就像填写表格一样。 单击手风琴中的下一个选项卡时，他们选择下一个单选按钮，等等。

在这种方法中， 只能同时打开一个选项卡 。 HTML的逻辑如下所示：

<div class="css-only-accordion">

	<!-- One Tab Inside The Accordion -->
	<div>
		<input type="radio" name="tab-1" id="tab-1">
		<label for="tab-1">Title of Tab 1</label>
		
		<div class="tab-content">
			<h2>Content Title (don't use h1 tag here)</h2>
			<p>Some content.... </p>p>
		</div>
	
	</div>
	
	<!-- Other Tabs with The Same Structure -->
	
</div>

您需要为手风琴中的每个选项卡添加一个单独的单选标签对 。 仅HTML不会提供所需的行为，您还需要添加适当CSS规则，让我们看看如何实现这一点。

固定高度垂直制表符

在此解决方案中（请参见下面的屏幕截图），开发人员在显示的帮助下隐藏了单选按钮。 规则，然后他给保存每个选项卡标题的label标签赋予一个相对位置，并给对应标签的绝对位置：伪元素之后。

后者握住带有绿色+符号的手柄，可以打开选项卡。 闭合的卡舌还使用带有绿色“-”符号的手柄。 在CSS中，借助元素+元素选择器选择了关闭的选项卡。

您还需要给打开标签的内容设置一个固定的高度。 为此，借助element1〜element2 CSS选择器选择打开的标签的主体（在上面HTML中用tab-content类标记）。

CSS的基本逻辑如下：

input[type=radio] {
	display: none;
}
label {
	position: relative;
	display: block;
}
label:after {
	content: "+";
	position: absolute;
	right: 1em;
}
input:checked + label:after {
	content: "-";
}
input:checked ~ .tab-content {
	height: 150px;
}

您可以在Codepen上查看完整CSS。 CSS最初是用Sass编写的，但是如果单击“查看已编译”按钮，则可以看到已编译CSS文件。