根据输入复选框状态应用 CSS 规则

Question

我目前正在开发一个使用 :checked 变量将规则应用于 CSS 的网站。我有一个复选框输入，当被触发时，应该完成两件事。它应该做的第一件事是在选中时将 div 从 0 的高度扩展到 200，并在未选中时返回 0。我触发第一个任务没有问题。在选中该框后应该完成的第二件事是变换：旋转（45deg）一个带有“+”的div，它应该旋转45度到一个“x”（不是实际的 x，而是旋转后的 +）。

我目前已设置代码以在 :hover 上显示动画，但这仅用于说明目的，不会出现在我的最终代码中。因此，将鼠标悬停在 "+ 上，看看我想用 :checked 输入来完成什么。

如果你愿意看看我的code，并告诉我我做错了什么，我将不胜感激！如果您有任何问题，请告诉我。

注意：理想情况下，我正在寻找一种不需要 JS 的纯 CSS 解决方案。如果这不可能，请告诉我。

Here's my code pen.

Answer 1

前几天我写了一个类似的解决方案，here。

基本上，您在使用:checked 方法时会受到限制。您依赖于adjacent 和general sibling combinators、+、~。如果元素不是一般的前置同级元素，则它不会起作用。

在此示例中，.expand 不是前面的兄弟。因此解决方案是将input 元素放在文档的根部，然后使用选择器input[name='panel']:checked ~ label .rotate 更改.rotate 元素。请注意，现在也使用通用兄弟组合器~，而不是相邻的兄弟组合器+。

不需要 JS - UPDATED EXAMPLE

修改后的 HTML：

<input type="checkbox" name="panel" class="hidden" id="panel"/>
<label for="panel">
  Click Me
  <div class="rotate">+</div>
</label>
<div class="expand">
  Content goes here.
</div>

更新的 CSS：

input[name='panel']:checked ~ label .rotate {
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

值得注意的是，我也将过渡属性移动到了.rotate 元素。

Answer 2

jQuery 解决方案：

http://jsfiddle.net/SinisterSystems/PUwh6/2/

使用ID，以便jQuery 可以轻松地绘制出您正在做的事情，而无需到处搜索课程。

HTML：

<label for="panel">
  Click Me
  <div id="rotate">+</div>
</label>

CSS：

#rotate {
 width: 12px;
 float: right;
 font-size: 18px;
 margin-top: -6px;
 text-align: center;
 transition: all 1s ease;
 -o-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 }
#rotate.spin {
 transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
}

jQuery：

$('#panel').on('click',function() {
  $('#rotate').toggleClass('spin');
});