jQuery解决方案：

Question

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

我目前已经设置了代码来显示动画：hover，但这只是为了说明目的，这不会出现在我的最终代码中。所以将鼠标悬停在“ + 上，看看我正在尝试使用：检查输入。

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

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

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');
});

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

2 个答案:

jQuery解决方案：

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