<div折疊特效是一種網頁設計中常用的交互特效，能夠使用戶在觸發事件后，快速折疊顯示或隱藏指定內容。通過這種特效，我們可以有效地減少頁面的信息量，提供更好的用戶體驗。本文將介紹幾個使用div折疊特效的代碼案例，幫助讀者更好地理解和運用這種特效。
第一個代碼案例是一個簡單的div折疊特效，點擊一個按鈕，可以展開或折疊一個段落內容。代碼如下：

<pre>
<p>點擊按鈕展開/折疊：</p>
<br>
<button onclick="toggleContent()">點擊我</button>
<div id="content" style="display: none;">
<p>這是要折疊的內容。</p>
</div>
<br>
<script>
function toggleContent() {
var content = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>

在這段代碼中，我們創建了一個按鈕，以及一個要折疊的內容段落。通過設置內容的display樣式為none，初始狀態下內容是被折疊隱藏起來的。當點擊按鈕時，通過toggleContent函數來切換內容的顯示與隱藏。函數通過getElementById方法獲取到內容的元素對象，然后通過判斷當前的display樣式，來設置新的display樣式，實現展開/折疊的效果。
第二個代碼案例是一個更復雜的div折疊特效，點擊標題可以展開或折疊一個折疊板。代碼如下：

<pre>
<style>
.accordion {
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
<br>
  .accordion-header {
padding: 10px;
background-color: #f2f2f2;
cursor: pointer;
}
<br>
  .accordion-content {
padding: 10px;
display: none;
}
</style>
<br>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(1)">折疊板1</div>
<div class="accordion-content" id="accordion1">
<p>這是折疊板1的內容。</p>
</div>
</div>
<br>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(2)">折疊板2</div>
<div class="accordion-content" id="accordion2">
<p>這是折疊板2的內容。</p>
</div>
</div>
<br>
<script>
function toggleAccordion(accordionId) {
var accordionContent = document.getElementById("accordion" + accordionId);
if (accordionContent.style.display === "none") {
accordionContent.style.display = "block";
} else {
accordionContent.style.display = "none";
}
}
</script>

在這段代碼中，我們使用了CSS來美化折疊板的樣式。通過為折疊板的標題和內容分別設置不同的樣式類，來實現點擊標題時展開或折疊對應的內容。在JavaScript的代碼中，我們通過傳入不同的accordionId來控制對應折疊板的內容。通過getElementById方法獲取到對應的元素對象，然后根據當前的display樣式來設置新的display樣式，實現展開/折疊的效果。
通過以上兩個代碼案例的介紹，希望讀者能夠理解和運用div折疊特效，為網頁設計增添更多的用戶交互體驗。同時，這種特效的運用也需要結合實際需求和設計風格，合理地應用在不同的頁面中，以提高頁面的可讀性和用戶體驗。希望讀者通過學習本文，能夠靈活運用div折疊特效，為自己的網頁設計帶來更多的創意和亮點。