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

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

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

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

1.单选按钮方法

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

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

    
	
     	
     
		
      		
      Title of Tab 1				
      
			
       
Content Title (don't use h1 tag here)
			
       
Some content.... 
p>		
      
		
     
		
     	
    

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

固定高度垂直制表符

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

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

您还需要给打开标签的内容设置一个固定的高度。 为此，借助 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;}

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

带单选按钮的图像手风琴

这种精美的图像手风琴使用相同的单选按钮方法，但此处的开发人员使用figcaption HTML标签代替了标签，以完成手风琴的行为。

CSS有所不同，主要是因为在这种情况下，选项卡不是垂直放置而是水平放置。 开发人员使用element + element CSS选择器（在前面的示例中用于选择切换器）来确保覆盖图像的边缘仍然保持可见。

阅读有关如何创建这种优雅的纯CSS手风琴的 。

2.复选框方法

复选框方法使用复选框输入类型而不是单选按钮。 当用户选择一个选项卡时，他们基本上会选中相应的复选框。

与单选按钮方法相比，不同之处在于可以同时打开多个选项卡 ，就像可以检查表单中的多个复选框一样。

另一方面，当用户单击另一个选项卡时，这些选项卡不会自行关闭。 HTML的逻辑与之前相同，只是在这种情况下，您需要使用复选框作为输入类型。

    
	
     	
     
		
      		
      Title of Tab 1				
      
			
       
Content Title (don't use h1 tag here)
			
       
Some content.... 
p>		
      
		
     
		
     	
    

固定高度复选框手风琴

如果需要固定高度的内容选项卡，则CSS的逻辑与单选按钮的情况几乎相同，只是输入类型已从单选更改为复选框。 在此您可以查看代码。

流体高度复选框手风琴

当同时打开多个选项卡时，显示固定高度的选项卡可能会对用户的体验产生负面影响，因为手风琴的高度会大大增加。 如果将固定高度更改为流体高度 ，则可以改善此问题； 这意味着打开的标签的高度会根据其所容纳内容的大小而扩大或缩小。

为此，您需要将标签内容的固定高度修改为max-height ，并利用相对单位 ：

input:checked ~ .tab-content {	max-height: 50em;}

如果您想更好地了解此方法的工作原理，可以看一下 。

3.：target方法

是CSS3的伪选择器之一。 借助其帮助，您可以通过以下方式将HTML元素链接到锚标记：

    
	
     
Title of the Tab
	
     
Content of the Tab
    

当用户单击选项卡的标题时，由于使用：target伪选择器，将打开整个部分，并且URL还将更改为以下格式： www.some-url.com/#tab-1 。

可以使用section：target {…}规则在CSS中设置打开选项卡的样式。 我们在hongkiat上有一篇 ，介绍如何使用：target方法在垂直和水平布局中创建漂亮的仅CSS手风琴。

：target方法的主要缺点是， 当用户单击选项卡时 ， 它会更改URL 。 这会影响浏览器的历史记录，浏览器的“后退”按钮不会使用户进入上一页，而是进入手风琴的先前状态。

4.：hover方法

如果使用：hover CSS伪选择器而不是：target ，则可以克服后一个缺点，但是在这种情况下，选项卡不会对click做出React，而是对hover事件做出React。 这里的窍门是，您需要隐藏未悬停的元素 ，或减小其宽度或高度 –根据选项卡的布局

为了使手风琴工作，需要使悬停的元素可见，或将其设置为全宽/高。

以下3种仅CSS风格的手风琴都是使用：hover方法制作的，单击屏幕快照下面的链接以查看代码。

水平图像手风琴

偏斜的手风琴

悬停激活的默认状态的手风琴

翻译自: