Question

以下CSS复选框hack在假设内容是复选框的兄弟的情况下工作。单击标签后，内容将切换。

<input id="checkbox" type="checkbox" />
<label for="checkbox">
  Toggle content
</label>
<div class="content">Content here</div>

#checkbox {
  display: none;
}

#checkbox:not(:checked) ~ .content {
  display: none;
}

只有当内容不是复选框的兄弟时，才能使用CSS实现相同的效果？例如：

<div>
  <input id="checkbox" type="checkbox" />
  <label for="checkbox">
    Toggle content
  </label>
</div>
<div class="content">Content here</div>

Answer 1

您可以使用：target伪类并使用锚点而不是复选框来执行此操作。丑陋但只有CSS：

a {
  color: #000000;
  text-decoration: none;
}

#off {
  display: none;
}

.content {
  display: none;
}

#your-target:target ~ .content {
  display: block;
}

#your-target:target #on {
  display: none;
}

#your-target:target #off {
  display: block;
}

<div id="your-target">
  <a id="on" href="#your-target">
    Toggle content
  </a>
  <a id="off" href="#">
    Toggle content
  </a>
</div>
<div class="content">Content here</div>

CSS复选框黑客与非兄弟内容

1 个答案: