，我們來看一個簡單的案例，通過點擊按鈕將一段長篇內(nèi)容折疊起來：
<div id="content" style="display:none;">
這是一段需要折疊的長篇內(nèi)容。
...
很多文字都在這里。
</div>
<button onclick="toggleContent()">查看全文</button>
<br>
<script>
function toggleContent() {
var content = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>在上面的代碼中，我們創(chuàng)建了一個 id 為 "content" 的 div 元素，其中插入了一段需要折疊的長篇內(nèi)容。通過設置 style 屬性的 display 值為 "none"，我們將其隱藏起來。
接下來，我們創(chuàng)建一個按鈕，并通過 onclick 事件調(diào)用 toggleContent() 函數(shù)。在 toggleContent() 函數(shù)中，我們通過 getElementById() 方法獲取到 id 為 "content" 的 div 元素，并判斷其當前的 display 值。如果 display 值為 "none"，則將其設置為 "block"，即顯示出來；如果 display 值為 "block"，則將其設置為 "none"，即隱藏起來。通過這種方式，我們可以通過點擊按鈕來切換長篇內(nèi)容的顯示狀態(tài)，實現(xiàn)折疊與展開的效果。
除了使用 JavaScript 來實現(xiàn) "div 全文 收起" 的效果之外，我們還可以使用 CSS 來實現(xiàn)相同的效果。下面是一個使用 CSS 來實現(xiàn)的案例：
<style>
#content {
max-height: 200px;
overflow: hidden;
}
#content.expanded {
max-height: none;
}
</style>
<br>
<div id="content">
這是一段需要折疊的長篇內(nèi)容。
...
很多文字都在這里。
</div>
<br>
<button onclick="toggleContent()">查看全文</button>
<br>
<script>
function toggleContent() {
var content = document.getElementById("content");
content.classList.toggle("expanded");
}
</script>在上面的代碼中，我們通過 CSS 的 max-height 和 overflow 屬性來實現(xiàn)內(nèi)容的折疊和展開。，我們給 id 為 "content" 的 div 元素設置一個最大高度為 200px，并將 overflow 屬性設為 hidden，即隱藏超過最大高度的部分。
接下來，我們給這個 div 元素創(chuàng)建一個名為 "expanded" 的 class，并將其樣式中的 max-height 屬性設為 none。然后，當點擊按鈕時，我們通過 JavaScript 中的 classList.toggle() 方法來切換 div 元素的 class，從而實現(xiàn)折疊與展開的效果。如果 div 元素的 class 包含 "expanded"，則將其內(nèi)容完整顯示；如果 div 元素的 class 不包含 "expanded"，則將其內(nèi)容折疊起來。
最后，讓我們來參考一個真實案例，看看 "div 全文 收起" 技術在實際應用中是如何發(fā)揮作用的。
假設我們的網(wǎng)站上有一個博客頁面，其中包含了一篇長篇文章。為了提供更好的用戶體驗，我們決定將這篇文章的部分內(nèi)容默認折疊起來，并提供一個按鈕讓用戶查看全文。
<div>
<h1>這是一篇長篇文章的標題</h1>
<div class="intro">
這是文章的簡介部分，只顯示部分內(nèi)容。
</div>
<div class="full-content" style="display:none;">
這是文章的完整內(nèi)容。
...
非常長的內(nèi)容都在這里。
</div>
<button onclick="toggleContent()">查看全文</button>
</div>
<br>
<script>
function toggleContent() {
var fullContent = document.querySelector(".full-content");
fullContent.style.display = fullContent.style.display === "none" ? "block" : "none";
}
</script>在上面的代碼中，我們將長篇文章的標題放在一個 h1 標簽中，將文章的簡介部分放在一個 class 為 "intro" 的 div 元素中。然后，我們將文章的完整內(nèi)容放在一個 class 為 "full-content" 的 div 元素中，并通過設置 display 屬性為 "none" 來將其折疊起來。
最后，我們創(chuàng)建了一個按鈕，并通過 onclick 事件調(diào)用 toggleContent() 函數(shù)。在 toggleContent() 函數(shù)中，我們通過 querySelector() 方法獲取到 class 為 "full-content" 的 div 元素，并判斷其當前的 display 值。如果 display 值為 "none"，則將其設置為 "block"，即完整內(nèi)容顯示出來；如果 display 值為 "block"，則將其設置為 "none"，即完整內(nèi)容折疊起來。通過這種方式，用戶可以通過點擊按鈕來查看全文或收起全文，提高了閱讀體驗。
本文通過幾個代碼案例詳細解釋了 "div 全文 收起" 技術的實現(xiàn)原理，并參考了其他文章中的真實案例。希望本文對讀者有所幫助，能夠更好地理解和運用 "div 全文 收起" 技術。