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?

2条评论

小可爱 says: 回复

里面的加号+是什么意思?为什么要这样写?

歪麦 says:

+是相邻兄弟选择器,可选择紧接在另一元素后的元素,且二者有相同父元素。

发表评论

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

昵称 *