折疊(js & css)代碼，在我們日常的前端開發中，我們經常需要面對大量代碼的問題，這時一種折疊代碼的方法便可以在一定程度上協助我們解決代碼閱讀的問題，今天來介紹一下兩種折疊代碼的實現方法。

方法一：使用jQuery方法實現

$(document).ready(function () {
$(".code").hide();
$(".show_code").click(function () {
$(this).next(".code").slideToggle();
});
 });

代碼實現原理：

第一步：首先給需要折疊的代碼的父級元素，賦予一個類名，可以是code,container等等。

第二步：初始化將所有的代碼進行隱藏。

第三步：為所有需要折疊的代碼，添加一個點擊事件，點擊時候使用jQuery中的slideToggle()方法切換該代碼的顯示狀態。

方法二：使用純JS實現

window.onload = function () {
var code = document.getElementsByClassName('code');
var show = document.getElementsByClassName('show_code');
for (var i = 0; i < show.length; i++) {
show[i].onclick = function () {
var sibling = this.nextElementSibling || this.nextSibling;
if (sibling.nodeType != 1) {
sibling = sibling.nextSibling;
}
if (sibling.style.display == "block") {
sibling.style.display = "none";
} else {
sibling.style.display = "block";
}
}
}
}

代碼實現原理：

第一步：同樣的，給需要折疊的代碼的父級元素，賦予一個類名，可以是code,container等等。

第二步：使用純JS獲取到所有需要點擊的元素。實現獲取parentNode下的第一個元素（nextElementSibling）并且該元素的nodeType為1的功能。

第三步：使用if-else判斷節點是否已經折疊或者展開，若是已折疊，則進行展開操作；反之，進行折疊操作。

綜上所述，這里就介紹了兩種關于折疊(js & css)代碼的方法，希望能夠幫助到對此有需求的小伙伴們。