显示/收缩效果代码 - 阿强爱分享

显示/收缩效果代码

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

代码如下

<div class="demo">
  <input type="checkbox" id="check" style="display:none">
  <p>HTC 计划在 10 月 22 日推出区块链智能手机</p>
  <div class="element">
    <p>该公司一个有趣的发展方向就是决定推出名为 Exodus 的区块链智能手机 ... 该手机制造商在照片分享应用 Instagram 上为这个即将推出的区块链智能手机建造了一个新的页面</p>
  </div>
  <label for="check" class="check-in">更多↓</label>
  <label for="check" class="check-out">收起↑</label>
</div>

CSS代码

<style>
.demo{width: 200px;padding-left:100px;padding-top: 10px;}
.element{
  width: 200px;
  padding-top: 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s;
} 
:checked ~ .element{
  max-height: 666px;
}
:checked ~ .check-out{
  display: block;
}
:checked ~ .check-in{
  display: none;
}
.check-in,.check-out{
  color: blue;
  cursor: pointer;
  margin-top: 15px;
}
.check-out{
  display: none;
}
</style>
分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-10-9

本文标题: 显示/收缩效果代码

本文链接: https://iooqp.cn/?post=517

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 777 个字!

分享到:

精彩评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏