js轻松实现折叠面板

gghyoo 发布于2019-08-29 13:44 / 3291人阅读

摘要：移动端导航栏有个很常见的折叠菜单，有插件实现，有组件。最近用无插件实现一个这样的效果。探究历程直接采用，虽然实现了控制容器的显示和隐藏，但是效果生硬。

移动端导航栏有个很常见的折叠菜单，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

//html

...
//js

//这样虽然实现了效果，但是需要提前知道容器的高度
//如果设置height为auto,然而transition并没有效果

transition: max-height 600ms;

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

//思路示例
//css

//html

...
//js

//这样过程中就会有个不尽人意的地方，关闭的时候总会有点延迟
//原因可能是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

云服务器 GPU云服务器 JS轻松实现CSS设置可折叠面板 js 折叠 js 折叠页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112669.html

js轻松实现折叠面板

摘要：移动端导航栏有个很常见的折叠菜单，有插件实现，有组件。最近用无插件实现一个这样的效果。探究历程直接采用，虽然实现了控制容器的显示和隐藏，但是效果生硬。移动端导航栏有个很常见的折叠菜单，bootstrap有collapse插件实现，jQuery UI有Accordion组件。最近用js无插件实现一个这样的效果。探究历程 display：none；直接采用display，虽然实现...

suxier 2019-08-21 17:26 评论0 收藏0
前端开发文档

摘要：最近在整理全栈开发方面的技术细节，写成文档方便工作中查找，在这里分享这个站点。最近在整理全栈开发方面的技术细节，写成文档方便工作中查找，在这里分享这个站点。地址：前端开发文档全栈开发 HTML5/CSS3 HTML元素语义化标签 CSS3样式 CSS选择器 CSS继承属性 CSS3核心模块 CSS盒子模型 CSS背景图像 CSS清除浮动 CSS定位 SVG指南弹性图...

JerryC 2019-08-22 17:04 评论0 收藏0
前端开发文档

摘要：最近在整理全栈开发方面的技术细节，写成文档方便工作中查找，在这里分享这个站点。最近在整理全栈开发方面的技术细节，写成文档方便工作中查找，在这里分享这个站点。地址：前端开发文档全栈开发 HTML5/CSS3 HTML元素语义化标签 CSS3样式 CSS选择器 CSS继承属性 CSS3核心模块 CSS盒子模型 CSS背景图像 CSS清除浮动 CSS定位 SVG指南弹性图...

binta 2019-08-29 15:21 评论0 收藏0
前端开发文档

摘要：最近在整理全栈开发方面的技术细节，写成文档方便工作中查找，在这里分享这个站点。最近在整理全栈开发方面的技术细节，写成文档方便工作中查找，在这里分享这个站点。地址：前端开发文档全栈开发 HTML5/CSS3 HTML元素语义化标签 CSS3样式 CSS选择器 CSS继承属性 CSS3核心模块 CSS盒子模型 CSS背景图像 CSS清除浮动 CSS定位 SVG指南弹性图...

Yi_Zhi_Yu 2019-08-02 10:23 评论0 收藏0
With TypeScript 2.8+ ：更好的 React 组件开发模式

摘要：近两年来一直在关注开发，最近也开始全面应用。首先，我们从无状态组件开始。渲染回调模式有一种重用组件逻辑的设计方式是把组件的写成渲染回调函数或者暴露一个函数属性出来。最后，我们将这个回调函数的参数声明为一个独立的类型。近两年来一直在关注 React 开发，最近也开始全面应用 TypeScript 。国内有很多讲解 React 和 TypeScript 的教程，但如何将 TypeScri...

simon_chen 2019-08-22 17:58 评论0 收藏0