js實現代碼摺疊功能（代碼摺疊快捷鍵）

本文目錄一覽：

• 1、Vue.js+Element-UI實現點擊按鈕控制左側菜單摺疊與展開
• 2、Vuejs高度的改變動畫探索：摺疊面板Collapse組件的最佳實現方案
• 3、求助如何用JS實現摺疊菜單功能
• 4、javascript怎麼實現列表顯示與摺疊
• 5、MyEclipse中怎樣才能使js代碼 摺疊起來

Vue.js+Element-UI實現點擊按鈕控制左側菜單摺疊與展開

在element-ui中採用NavMenu導航菜單作為系統菜單的實現。

官方文檔中NavMenu導航菜單有一個Menu Attributes屬性collapse，是一個 bollean 類型，用於控制是否水平摺疊菜單。

我們可以通過設置collapse屬性的值為 true 或 false 來控制菜單的摺疊與展開。

解決方案

1.實現一個按鈕，

2.在data中定義一個數據collapse

3.實現方法toggleCollapse

4.在el-menu中動態綁定屬性值collapse

問題：在左側菜單的展開與摺疊中，文本和圖標摺疊了，但是菜單的長度並沒有摺疊，發現原因是菜單的長度給了一個固定的值，而實際上我們需要動態給定長度。如果菜單是展開的，長度是等於文本的長度+圖標的長度。如果菜單是摺疊的，長度是等於圖標的長度。我們可以根據isCollapse的值進行判斷，通過它的值為true或者是false，來給定不同的長度：

Vuejs高度的改變動畫探索：摺疊面板Collapse組件的最佳實現方案

使用過CSS transition屬性的童鞋們應該都清楚，當元素在過渡開始或者結束時的高度為auto時，動畫是不生效的；那麼如何才能實現元素高度的改變動畫效果呢？ 本篇文章將為大家提供一個基於Vue3的非常簡潔的解決方案。

要實現高度的改變動畫，我們需要在動畫進行之前為元素設置準確的高度。

當元素由可見變為隱藏狀態時，我們需要先獲取元素的計算高度，將其設置到style屬性上，然後執行一個觸發瀏覽器渲染引擎重繪的動作，然後再將高度設置為0，這樣高度的改變動畫就會正常進行。

當元素由隱藏變為可見狀態時，我們需要先將高度設置為auto，然後獲取元素的計算高度，再將高度設置為0，然後執行一個觸發瀏覽器渲染引擎重繪的動作，然後再將高度設置為計算高度，這樣高度的改變動畫就會正常進行。

現在，根據以上實現原理分析，我們創建一個高度的改變動畫通用組件CollapseTransition.vue。該組件非常簡單，僅需30多行代碼。我幾乎每行代碼都有注釋，大家應該能看懂吧？

以上就是實現高度的改變動畫的通用組件源碼，童鞋們理解了嗎？是不是非常簡單？現在，我們實現摺疊面板組件。使用過element-ui這樣的UI庫的童鞋們應該都知道，摺疊面板是由兩個組件摺疊面板Collapse和摺疊面板項CollapseItem組合而成；

現在，我們先實現CollapseItem.vue組件。為了節省篇幅，我將源碼中的空行全部去掉了，縮進比較規範，自認為可讀性還行；源碼如下，一共30多行，我直接在源碼中添加了注釋，就不過多解釋了。

這是CollapseItem.vue組件的樣式。

現在，我們實現Collapse.vue組件。該組件仍然只有30多行，大家理解起來應該很輕鬆，我就直接在源碼里添加註釋作為講解了；

以上就是摺疊面板組件的實現。包括摺疊動畫組件，一共僅需不到150行代碼，是不是非常簡單？童鞋們都理解了嗎？不管有什麼疑問，童鞋們都可以問我。感謝閱讀！

求助如何用JS實現摺疊菜單功能

最簡單的方法就是把二級菜單的樣式設置為：

.oe_secondary_submenu {display:none;}

然後在點擊的時候顯示二級菜單：

$(“.oe_secondary_submenu”).data(“onShow”)=false;    //一開始狀態為隱藏

$(“.oe_secondary_menu_section”).click(function(){

    if($(“.oe_secondary_submenu”).data(“onShow”)){  //切換二級菜單的同時改變狀態

       $(“.oe_secondary_submenu”).hide();

       $(“.oe_secondary_submenu”).data(“onShow”,false);

    }else{

       $(“.oe_secondary_submenu”).show();

       $(“.oe_secondary_submenu”).data(“onShow”,true);

    }

});

複雜一點的話可以用各種插件

javascript怎麼實現列表顯示與摺疊

一、首先定義一個JavaScript function，如下：

function puckerMenu(level) {

var levelLength = (‘row’ + level).length;

var toDo = ‘0’;

for (var iCount = 0 ; iCount document.all.length; iCount++){

if ( document.all[iCount].id.indexOf(‘row’ + level) -1 ( document.all[iCount].id.length levelLength)) {

if ( document.all(‘level’ + level).src.indexOf(‘minus.gif’) -1 ) {

document.all[iCount].style.display = ‘none’;

toDo = ‘1’;

} else {

document.all[iCount].style.display = ‘block’;

toDo = ‘0’;

}

}

}

if ( toDo == ‘1’ ) {

document.all(‘level’ + level).src = ‘images/plus.gif’;

} else {

document.all(‘level’ + level).src = ‘images/minus.gif’;

}

}

二、然後在網頁上定義一個div和一個ul，注意div中要包含一個id為level開頭的image和一個onclick事件，ul中id要包含row，默認情況下是展開的，如果需要默認為閉合，則要在ul中加入style=”display:none”

例子如下：

body

divstyle=”CURSOR: hand”

onclick=”puckerMenu(‘1’);”IMGid=level1

src=”images/minus.gif”public class DataAccess/div

ulid=row1

li private string connString;

divstyle=”CURSOR: hand”

onclick=”puckerMenu(‘2’);”IMGid=level2

src=”images /plus.gif”protected DbConnection OpenConnection()/div

ulid=row2style=”display:none”{…}/ul

li

Other

/ul

/body

MyEclipse中怎樣才能使js代碼 摺疊起來

js好像只有script/script兩個之間的可以摺疊，小段的函數不行