js轻松实现折叠面板
时间：2023-03-30 17:40:35
CSS
移动端导航栏有很常见的折叠菜单，bootstrap有折叠插件实现，jQueryUI有Accordion组件。最近用js不用插件就实现了这样的效果。探索过程显示：无；直接使用display，虽然实现了控件容器的显示和隐藏，但是效果比较生硬。//jq或zepeto的hide和show方法使用了这个属性$('#el').hide();$('#el').show();/**show:function(){returnthis.each(function(){//清除元素的内联display="none"样式this.style.display=="none"&&(this.style.display=null)//当样式表中的元素时displaystyle为none，设置其显示为默认值是获取元素默认显示的方法})},hide:function(){returnthis.css("display","none")}**/transition:height600ms;改变容器的高度，配合overflow:hidden；实现平滑动画//idea示例//css//html...
//js//虽然这样实现了效果，但是需要提前知道容器的高度//如果设置高度为auto，但是transition没有效果transition:max-height600ms;将transition的属性改成max-height，max-height会限制元素的高度小于这个值，所以我们把closed状态的值设置为0，open状态的值设置为大够了//ideaexample//css//html
... //js//在这个过程中会有一个不尽如人意的地方，关闭时总会有一点延迟//原因可能是从maxHeight到height的过渡值得花时间。获取容器的真实高度。转场体验优化，看到这个方法//思路：取消转场==”setheight:auto==”//获取容器真实高度==”setheight:0==”//settransition=="triggerbrowserrearrangement=="//设置容器的真实高度functionopenAndClose(){varel=document.getElementById("box");if(window.getComputedStyle(el).height=="0px"){//macSafari下好像auto也会触发transition，所以用none~el.style.transition="none";el.style.height="自动";vartargetHeight=window.getComputedStyle(el)。高度;el.style.transition="高度600ms"el.style.height="0px";el.offsetWidth;//触发浏览器回流el.style.height=targetHeight;}else{el.style.height="0px";}}其他getComputedStyle()方法获取最终应用到元素的所有CSS属性对象|MDN
