是否可以将以下jquery转换为css？

Question

我有以下片段：

$(".status").on("click", function() {
  if ($(this).prop("checked")) {
    $(this).next().show();
  } else {
    $(this).next().hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <input type="checkbox" class="status" checked />
  <div class="infoCont">....lot of stuff......</div>
</div>
<div class="info">
  <input type="checkbox" class="status" checked />
  <div class="infoCont">....lot of stuff......</div>
</div>

我使用 jQuery 获得了这个结果，但我想问一下是否可以使用纯 css 获得相同的结果。

提前致谢。

Answer 1

您应该可以使用以下代码实现此目的。

    .info>.infoCont {
    display:none;
}
.info>.status:checked + .infoCont {
    display:block;
}

Answer 2

这应该有效。

.example + span {
    visibility: visible;
}

.example:checked + span {
    visibility: hidden;
}

<input type="checkbox" class="example"><span>Hello</span><br>
<input type="checkbox" class="example"><span>World</span><br>

是否可以将以下jquery转换为css？

Is it possible to convert the following jquery to css?

html

checkbox