js輕松實現折疊面板

gghyoo 發布于2019-08-29 13:44 / 3311人閱讀

摘要：移動端導航欄有個很常見的折疊菜單，有插件實現，有組件。最近用無插件實現一個這樣的效果。探究歷程直接采用，雖然實現了控制容器的顯示和隱藏，但是效果生硬。

移動端導航欄有個很常見的折疊菜單，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 折疊頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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