如何使用CSS切换显示/隐藏div？

Question

我创建了一个菜单div,用于在鼠标单击时显示/隐藏其下方的另一个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>