首页 > 其他分享 >展开折叠功能,根据元素高度展开,不需提前计算元素高度

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

时间:2023-03-15 10:14:01浏览次数:25  
标签:元素 高度 state var 123123123 div 展开

<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
}

 

标签:元素,高度,state,var,123123123,div,展开
From: https://www.cnblogs.com/panyujun/p/17217471.html

相关文章