HTML可折叠按钮-如何使div在按钮后出现？

Question

我正在尝试使用纯HTML和CSS创建一个可折叠按钮。这是我所拥有的：

#hidden {
  display: none;
  height: 100px;
  background: red;
}

 :checked+#hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>

这有效。但是，我希望隐藏的div在按钮之后而不是之前。当我将div移到复选框标签后时，它不起作用。

我该如何解决？

谢谢！

Answer 1

您要使用其他CSS选择器。下面的内容使用General sibling combinator来定位while(*s2) *s1++ = *s2++ ; printf("%s\n",str1); ，而不考虑其相对于div元素的顺序（只要跟随它）。

input

#hidden {
  display: none;
  height: 100px;
  background: red;
}

:checked ~ #hidden {
  display: block;
}

Answer 2

使用否定而不是+，以便它将选择与该类名称相关的所有div

#hidden {
  display: none;
  height: 100px;
  background: red;
}

 :checked~#hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>