CSS点击展开折叠效果

12.4k 记录 , 4评论

查看演示,直接上代码。

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?

4条评论

小可爱 says: 回复

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

歪麦 says: 作者

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

小小刘 says: 回复

我遇到个难题,就是给你5条文字。默认显示最后三条文字,前面的可折叠,点击展开所有。再点击收缩,显示后三条这个怎么弄,求解。

c
cnm says: 回复

写博客不会给个运行截图吗,傻逼?

发表回复

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

昵称 *