JS+CSS折疊是一種常見的頁面效果，它可以讓頁面內(nèi)容更加清晰，結(jié)構(gòu)更加緊湊。下面我們就來介紹一下如何實現(xiàn)JS+CSS折疊效果。

<style>
.fold-content {
display: none;
}
.fold-title {
cursor: pointer;
}
.fold-title.active {
font-weight: bold;
}
</style>
<script>
var titles = document.querySelectorAll('.fold-title');
for (var i = 0; i < titles.length; i++) {
titles[i].onclick = function() {
this.classList.toggle('active');
var content = this.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
}
}
</script>

上面的代碼中，我們首先定義了三個CSS類：fold-content、fold-title和active。其中，fold-content規(guī)定了被折疊的內(nèi)容隱藏，fold-title規(guī)定了標題具有光標樣式，active規(guī)定了選中的標題加粗顯示。

接著，在JS中，我們通過document.querySelectorAll('.fold-title')獲取了所有的標題，并依次為它們添加了點擊事件。當點擊標題時，我們通過this.classList.toggle('active')來切換標題的active類，從而改變標題的樣式。同時，我們通過this.nextElementSibling獲取標題下一個兄弟元素，即折疊的內(nèi)容，然后通過改變它的display屬性來實現(xiàn)內(nèi)容的折疊和展開。

至此，JS+CSS折疊效果就實現(xiàn)了。我們只需要為需要折疊的內(nèi)容添加fold-content類，為標題添加fold-title類，就可以讓它們具有折疊效果了。