js轻松实现折叠面板

移动端导航栏有个很常见的折叠菜单，bootstrap有collapse插件实现，jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。

---

探究历程

• display：none；

  • 直接采用display，虽然实现了控制容器的显示和隐藏，但是效果生硬。

//jq或者zepeto的hide和show方法就是采用这个属性
$('#el').hide();
$('#el').show();
/**
show: function() {
      return this.each(function() {
        //清除元素的内联display="none"的样式
        this.style.display == "none" && (this.style.display = null)
        //当样式表里的该元素的display样式为none时，设置它的display为默认值
        if (getComputedStyle(this, '').getPropertyValue("display") == "none") this.style.display = defaultDisplay(this.nodeName) //defaultDisplay是获取元素默认display的方法
      })
    },
hide: function() {
      return this.css("display", "none")
    }
**/

• transition: height 600ms;

  • 改变容器的高度，配合overflow: hidden;实现平滑动画

//思路示例
//css
<style>
.box {
  height: 0px;
  transition: height 600ms;
  overflow: hidden;
  background: #4b504c;
}
</style>
//html
<button>...</button>
<div id="box" class="box">...</div>
//js
<script>
function openAndClose(){
        var el = document.getElementById("box");
        if(window.getComputedStyle(el).height == "0px"){
            el.style.height = "300px";
        }else{
            el.style.height="0px";
        }
}
</script>
//这样虽然实现了效果，但是需要提前知道容器的高度
//如果设置height为auto,然而transition并没有效果

• transition: max-height 600ms;

  • 将transition的属性换成max-height,max-height会限制元素的height小于这个值，所以我们将关闭状态的值设成0，打开状态设置成足够大

//思路示例
//css
<style>
.box {
  height: 300px;
  max-height: 0px;
  transition: max-height 600ms;
  overflow: hidden;
  background: #4b504c;
}
</style>
//html
<button>...</button>
<div id="box" class="box">...</div>
//js
<script>
function openAndClose(){
        var el = document.getElementById("box");
        if(window.getComputedStyle(el).maxHeight == "0px"){
            el.style.maxHeight = "1040px";
        }else{
            el.style.maxHeight="0px";
        }
}
</script>
//这样过程中就会有个不尽人意的地方，关闭的时候总会有点延迟
//原因可能是maxHeight到height这个值得过渡过程耗费了时间

• 获取容器真实height

  • 网上搜了一下，拜读了内容loading加载后高度变化CSS3 transition体验优化，看到了这个方法

//思路：取消transition==》设置height：auto==》
//获取容器真实height==》设置height：0==》
//设置transition==》触发浏览器重排==》
//设置容器真实height
function openAndClose(){
        var el = document.getElementById("box");
        if(window.getComputedStyle(el).height == "0px"){
            // mac Safari下，貌似auto也会触发transition, 故要none下~
            el.style.transition = "none";
            el.style.height = "auto";
            var targetHeight = window.getComputedStyle(el).height;
            el.style.transition = "height 600ms"
            el.style.height = "0px";
            el.offsetWidth;//触发浏览器重排
            el.style.height = targetHeight;
        }else{
            el.style.height="0px";
        }
    }

---

其他

• getComputedStyle() 方法获取的是最终应用在元素上的所有CSS属性对象|MDN