6行原生代码 超级简单实现 html折叠面板 |
您所在的位置:网站首页 › 原生js显示隐藏窗口 › 6行原生代码 超级简单实现 html折叠面板 |
1.废话不多说,先上效果图:
2.用途一般是可折叠的列表(导航列表等):
3.代码(直接复制到.txt保存改为.html即可): 标题 内容 var content = document.getElementById("content"); function onTileClick() { content.style.height = content.offsetHeight===150 ? 0+'px' : 150+'px';}
以下是效果图1的完整代码: 标题 白日依山尽 黄河入海流 欲穷千里目 更上一层楼 var content = document.getElementById("content"); function onTileClick() {content.style.height = content.offsetHeight===150?0+'px':150+'px';}
4.思路: 折叠面板的主要就是元素高度或长度的变化,由普通的高度/宽度变为0,或者0延长为正常高度/宽度,这过程需要有一个伸缩的动画过程,这里用了属性transition: height 0.2s;指定元素的高度有变化的时候,从开始高度变为另一种高度的过渡时间为0.2秒。因此也就有了伸缩的动画效果。 第一份代码结构是下图这样: 折叠面板其实是由一个蓝色div和一个红色div组成,点击红色div的时候,蓝色div的高度用0.2秒时间缩短为0px的高度,此处必须要给蓝色div设置overflow: hidden;这样高度变为0后,才能隐藏div内的内容。
第二份完整代码结构是下图这样的: 折叠面板是由一个外层div,里面套着两个div组成的,当点击深红色的div(标题)时,绿色的div高度缩短为0px,过渡时间为0.2秒;
如果我的文章对您有帮助,就请客官给个赞吧 THE END!
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |