CSS

.manualItem {
  text-align: left;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s;
}
:checked ~ .manualItem {
  max-height:666px;
}
input[type="checkbox"] {
  position:fixed;
  clip:rect(0 0 0 0);
}
:checked ~ .check-in {
  display:none;
}
:checked ~ .check-out {
  display:inline-block;
}
.check-out {
  display:none;
}
.check-in,.check-out {
  color:#34538b;
  cursor:pointer;
}

DIV

<div class="manualContent">
  <input id="check" type="checkbox">
  <h4> 内容标题</h4>
<p> 内容简要</p>
<div class="manualItem">
详情描述 - 点击后展开后的内容
</div>
<label for="check" class="check-in"><span><< 展开 >></span></label>
<label for="check" class="check-out"><span><< 收起 >></span></label>  
</div>

友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

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