JS+CSS折疊是一種常見(jiàn)的頁(yè)面效果,它可以讓頁(yè)面內(nèi)容更加清晰,結(jié)構(gòu)更加緊湊。下面我們就來(lái)介紹一下如何實(shí)現(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>
上面的代碼中,我們首先定義了三個(gè)CSS類:fold-content
、fold-title
和active
。其中,fold-content
規(guī)定了被折疊的內(nèi)容隱藏,fold-title
規(guī)定了標(biāo)題具有光標(biāo)樣式,active
規(guī)定了選中的標(biāo)題加粗顯示。
接著,在JS中,我們通過(guò)document.querySelectorAll('.fold-title')
獲取了所有的標(biāo)題,并依次為它們添加了點(diǎn)擊事件。當(dāng)點(diǎn)擊標(biāo)題時(shí),我們通過(guò)this.classList.toggle('active')
來(lái)切換標(biāo)題的active
類,從而改變標(biāo)題的樣式。同時(shí),我們通過(guò)this.nextElementSibling
獲取標(biāo)題下一個(gè)兄弟元素,即折疊的內(nèi)容,然后通過(guò)改變它的display
屬性來(lái)實(shí)現(xiàn)內(nèi)容的折疊和展開(kāi)。
至此,JS+CSS折疊效果就實(shí)現(xiàn)了。我們只需要為需要折疊的內(nèi)容添加fold-content
類,為標(biāo)題添加fold-title
類,就可以讓它們具有折疊效果了。