HTML可折叠按钮-如何使div在按钮后出现? [英] HTML Collapsible Button - How to make div appear after button?

问题描述

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

I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:

#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移到复选框标签后时，它不起作用.

This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.

我该如何解决?

谢谢！

推荐答案

您要使用其他CSS选择器.下面使用常规同级组合器定位 div 不论其相对于 input 元素的顺序(只要跟随它).

You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).

#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>

这篇关于HTML可折叠按钮-如何使div在按钮后出现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！