纯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;
}

HTML:

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

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

就可以啦。

 

原文来自:

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

昵称 *