如何使用 CSS 切换 show/hide div？

Question

我创建了一个菜单 div，单击鼠标会在其下方 show/hide 另一个 div。但是，我需要菜单 div 上的箭头来切换点击。您知道箭头将如何指向一侧，但在单击菜单 div 并显示其他 div 时向下切换。我有下面的 CSS 代码和 HTML.

PS：我只能使用CSS。

CSS:

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}

.drop + input{
 display: none; /* hide the checkboxes */
}

.drop + input + div{
  display:none;
}

.drop + input:checked + div{
  display:block;
}

内联：

<label class="drop" for="_1">Collapse 1 </label>

<input id="_1" type="checkbox"> 
<div>Content 1</div>

感谢您的帮助！

Answer 1

您必须更改结构并使用伪插入箭头：

例子

.drop {
  cursor: pointer;
  display: block;
  background: #090;
}

input[type="checkbox"]  {
 display: none; /* hide the checkboxes */
}

input +.drop +  div

{
  display:none;
}
.drop:after {
  content:'▼';
  }
:checked  + .drop:after {
  content:'▲';
  }
input:checked + .drop + div{
  display:block;
}

<input id="_1" type="checkbox"> 
<label class="drop" for="_1">Collapse 1 </label>

<div>Content 1</div>

如何使用 CSS 切换 show/hide div？

How to make show/hide div with a toggle using CSS?

css

toggle

arrow-keys