HTML 展开和收起内容

  • 内容
  • 相关

CSS代码

<style>
.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;
}
</style>

html 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>
黑蜘蛛

本文标签:

版权声明:若无特殊注明,本文皆为《ღ軍尐ღ》原创,转载请保留文章出处。

字数统计:本文共有 《753》 个。

本文链接:HTML 展开和收起内容 - https://4dn.net/jsxx/278.html