如何使用 CSS Checkbox Hack 构建 Accordion 组件

在这个简短的教程中，我们将学习如何利用“css checkbox hack 技术”构建一个纯 CSS 灵活的手风琴组件。最重要的是，我们的组件将完全响应，并且它的布局将根据视口大小在水平和垂直之间切换。 

在此过程中，我们将讨论 CSS Checkbox Hack 的工作原理，并从 CodePen 上的开发人员那里了解其他一些 Checkbox Hack 灵感。听起来很有趣？

我们的响应式 CSS 手风琴

这是我们将在本教程中构建的内容：

See the Pen  How to Build an Accordion Component With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus)  on CodePen.

等等，什么是 CSS Checkbox Hack？

CSS 复选框 hack 允许您根据是否选中复选框（或单选按钮）来控制某些样式。它使用:checked 伪类选择器，这使我们能够说“如果选中了复选框，则将这些样式规则应用于其兄弟等”。

开发人员通常会隐藏输入本身，通过其标签控制选中的值，因此用户甚至根本无法判断他们正在切换复选框。

1. 从 html 标记开始

出于本练习的目的，我们将从Wikipedia中获取一些 关于四种不同事物的内容：动物、植物、空间和河流。

然后，我们将创建相应的单选按钮，我们将在 wiki 关键字下分组：

<input type="radio" id="animal" name="wiki" value="Animal" checked>

<input type="radio" id="plant" name="wiki" value="Plant">

<input type="radio" id="space" name="wiki" value="Space">

<input type="radio" id="river" name="wiki" value="River">

构建无序列表

接下来，我们将指定一个包含四个列表项的无序列表。每个列表项将代表一个手风琴项/窗格并包含两个元素： 

1. 首先，一个标签将作为手风琴的标题并负责打开目标项目。它的for值应与id上述单选按钮之一的值匹配。 

2. 其次，div  将作为手风琴内容区域的元素。

默认情况下，我们的手风琴中的一个窗格必须打开。考虑到这一点，让我们将checked属性添加到第一个单选按钮。

综上所述，这是我们需要的标记：

<ul class="accordion">

  <li>

    <label for="animal" class="accordion-title">

      <span>...</span>

      <span class="accordion-heading">...</span>

    </label>

    <div class="accordion-content">...</div>

  </li>

  <li>

    <label for="plant" class="accordion-title">

      <span>...</span>

      <span class="accordion-heading">...</span>

    </label>

    <div class="accordion-content">...</div>

  </li>

  <li>

    <label for="space" class="accordion-title">

      <span>...</span>

      <span class="accordion-heading">...</span>

    </label>

    <div class="accordion-content">...</div>

  </li>

  <li>

    <label for="river" class="accordion-title">

      <span>...</span>

      <span class="accordion-heading">...</span>

    </label>

    <div class="accordion-content">...</div>

  </li>

</ul>

2. 定义样式

准备好标记（并与我之前描述的 CSS 复选框 hack 内联）后，我们将首先通过将单选按钮移出屏幕来直观地隐藏单选按钮：

input[type="radio"] {

  position: absolute;

  left: -9999px;

}

手风琴将有一个最大宽度，一个最小高度，并表现为一个弹性容器：

/*CUSTOM VARIABLES HERE*/

 

.accordion {

  display: flex;

  width: calc(100% - 20px);

  max-width: 800px;

  min-height: 380px;

  margin: 0 auto;

  background: var(--accordion-color);

  color: var(--white);

}

此外，每个列表项都将用作 flex 包装器：

.accordion li {

  display: flex;

}

手风琴项应该分开，所以让我们给它们一个边框：

/*CUSTOM VARIABLES HERE*/

 

.accordion li:not(:last-child) {

  border: 1px solid var(--separator-color);

}

项目中的每个标题（标签）都将是一个弹性容器，其子元素将垂直分布在主轴上。此外，所有项目的宽度都是 70px：

/*CUSTOM VARIABLES HERE*/

 

.accordion .accordion-title {

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  width: 70px;

  font-size: 1.4rem;

  font-weight: bold;

  line-height: normal;

  padding: 20px 10px;

  background: var(--title-color);

  transition: color 0.1s;

}

 

.accordion .accordion-title:hover {

  color: var(--active-color);

}

里面的文字.accordion-heading会垂直旋转：

.accordion .accordion-heading {

  display: inline-block;

  white-space: nowrap;

  transform-origin: bottom;

  transform: rotate(-90deg) translate(50%, 50%);

}

最初，除了第一个窗格之外，所有其他窗格都将被隐藏：

.accordion .accordion-content { 

  display: none;

  align-items: center;

  padding: 20px;

}

3. Checkbox Hack：切换窗格

现在是魔术。每次我们点击一个标签，它的相关内容都会出现。为了实现这一点， 我们将利用 :checked 伪类、 后续兄弟选择器 ( ~) 和 相邻兄弟组合器 ( +)。

因此，当一个项目变得可见时，它将接收display: flex 而不是display: block. 这是因为我们希望通过利用align-items: center属性值使其内容垂直居中。此外，活动窗格的颜色必须更改，因此访问者可以清楚地了解哪个窗格是打开的。

或者，每次单选按钮获得焦点时，我们都可以为其关联的标签添加一个轮廓。这个小细节将帮助我们增强组件的可访问性。

这是相关的 CSS 内容：

/*CUSTOM VARIABLES HERE*/

 

[value="Animal"]:checked ~ .accordion [for="animal"] + .accordion-content,

[value="Plant"]:checked ~ .accordion [for="plant"] + .accordion-content,

[value="Space"]:checked ~ .accordion [for="space"] + .accordion-content,

[value="River"]:checked ~ .accordion [for="river"] + .accordion-content {

  display: flex;

}

 

[value="Animal"]:checked ~ .accordion [for="animal"],

[value="Plant"]:checked ~ .accordion [for="plant"],

[value="Space"]:checked ~ .accordion [for="space"],

[value="River"]:checked ~ .accordion [for="river"] {

  color: var(--active-color);

}

 

/*optional*/

[value="Animal"]:focus ~ .accordion [for="animal"],

[value="Plant"]:focus ~ .accordion [for="plant"],

[value="Space"]:focus ~ .accordion [for="space"],

[value="River"]:focus ~ .accordion [for="river"] {

  outline: 1px solid var(--active-color);

}

4. 响应迅速

正如我们已经讨论过的，在小屏幕上，手风琴内的项目应该堆叠，因此手风琴将具有垂直布局。感谢 flexbox，我们可以在不付出太多努力的情况下实现这个设计。事实上，我们所要做的就是更新 flex 包装器的方向并transform重置.accordion-heading.

查看以下媒体查询中的响应式样式：

@media screen and (max-width: 650px) {

  .accordion {

    min-height: 0; 

  }

   

  .accordion,

  .accordion li {

    flex-direction: column;

  }

   

  .accordion .accordion-title {

    flex-direction: row;

    width: auto;

  }

   

  .accordion .accordion-heading {

    transform: none;

  }

   

  .accordion .accordion-title,

  .accordion .accordion-content {

    padding: 20px;

  }

}

5.奖励：内容有限

在我们的例子中，每个手风琴项目中都有很多内容，所以一切看起来都很棒。但是，让我们确保当窗格中没有足够的内容（例如，窗格仅包含社交链接）时，手风琴仍然可以正常工作。 

为了满足这种情况，我们必须做两件事：

• 添加flex-grow: 1到包含活动窗格的列表项。要仅针对该项目而不是所有项目，我们需要向data-radio列表项目添加一个新的自定义属性 ( )，并为其标签的值赋值。

• 添加flex-grow: 1到.accordion-content，因此它将扩展并覆盖整个父宽度。

• .accordion-content将感谢的内容水平居中justify-content: center。

考虑到以上所有内容，我们将修改我们的 HTML 如下：

<ul class="accordion">

  <li data-radio="animal">...</li>

  <li data-radio="plant">...</li>

  <li data-radio="space">...</li>

  <li data-radio="river">...</li>

</ul>

然后，在 CSS 中，我们将包含这些样式：

.accordion .accordion-content {

  justify-content: center;

  flex-grow: 1;

}

[value="Animal"]:checked ~ .accordion [data-radio="animal"],

[value="Plant"]:checked ~ .accordion [data-radio="plant"],

[value="Space"]:checked ~ .accordion [data-radio="space"],

[value="River"]:checked ~ .accordion [data-radio="river"] {

  flex-grow: 1;

}

结论

就是这样的人！在这个快速教程中，我们利用“CSS checkbox hack 技术”构建了一个纯 CSS 手风琴。希望你喜欢这个练习，并且你会花一些时间为你自己的特定目的扩展它。

以下是我们构建的内容的提醒：

See the Pen  How to Build an Accordion Component With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus)  on CodePen.

额外项目

最后，请记住，通过此实现，一次只能打开一个折叠面板。那是因为我们在标记中使用了单选按钮。如果您想同时显示多个手风琴项目，请将单选按钮替换为复选框并在 CSS 中进行必要的更改（隐藏复选框）。

一如既往，非常感谢您的阅读！

CodePen 上的 Checkbox Hack 灵感

还有比 CodePen 更能看到其他人使用 CSS Checkbox Hack 构建的东西的地方吗？这里有一些很好的例子来激发你的胃口：

George W. Park 的响应式表情符号切换

See the Pen  Responsive Emoji Toggles #CodePenChallenge by George W. Park (@GeorgePark)  on CodePen.

斯蒂芬·格雷格（Stephen Greig）的仅 CSS 选项卡式内容

See the Pen  CSS Only Tabbed Content by Stephen Greig (@stephengreig)  on CodePen.

JAD3 的 CSS 复选框 hack 导航

See the Pen  css checkbox hack nav by JAD3 (@PortableTomb)  on CodePen.