展开折叠功能,根据元素高度展开,不需提前计算元素高度

复制代码
<div>我是title  <a class="a" onclick="expand()">展开</a></div>
  <div id="more" class="moreDiv">
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
    <p>123123123</p>
  </div>
复制代码
复制代码
.moreDiv {
  transition: all .2s;
  max-height: 0px;
  overflow: hidden;
  will-change: max-height;
}

.a {
  color: blue;
  cursor: pointer;
}
复制代码
复制代码
var state = 0
function expand() {
  var div = document.getElementById('more');
  var a = document.getElementsByClassName('a');
  if (state == 0) {
    div.style.maxHeight = div.scrollHeight + 'px';
    a[0].innerHTML = '收起';
  } else {
    div.style.maxHeight = '0px';
    a[0].innerHTML = '展开';
  }
  
  state = 1^state
}
复制代码

 

posted @   abc1234_abc  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示