CSS的div折疊是一種常用的網頁布局技術，通過設置樣式屬性，可以使一部分內容在頁面加載時處于折疊狀態，只在特定條件下展開或者隱藏。這種技術可以用于創建可展開的菜單、折疊面板、手風琴效果等。在本文中，我們將通過幾個代碼案例詳細解釋CSS div折疊的使用方法和效果。
，我們來看一個簡單的折疊菜單的例子。在這個例子中，我們使用CSS的:hover偽類和display屬性來實現鼠標懸停時展開菜單項的效果。，我們需要定義一個簡單的HTML結構，包含一個帶有子菜單的列表。然后，我們使用CSS來設置子菜單的默認樣式，并通過:hover偽類來設置鼠標懸停時的樣式。具體的代碼如下所示：

<ul>
<li>菜單項1
<ul class="submenu">
<li>子菜單項1</li>
<li>子菜單項2</li>
<li>子菜單項3</li>
</ul>
</li>
<li>菜單項2</li>
<li>菜單項3</li>
</ul>
<br>
<style>
.submenu {
display: none;
} 
<br>
li:hover .submenu {
display: block;
}
</style>

在上面的代碼中，我們通過設置.submenu的display屬性為none，使子菜單默認處于折疊狀態。然后，通過li:hover .submenu選擇器，當鼠標懸停在菜單項上時，將子菜單的display屬性設置為block，從而展開子菜單。
接下來，我們來看一個更復雜的折疊面板的例子。折疊面板可以展開和收起內容，只展示一個內容區域，并隱藏其他內容區域。我們可以使用CSS的:target偽類和max-height屬性來實現這個效果。具體的代碼如下所示：

<div class="accordion">
<div class="panel">
<h3 id="section1">Section 1</h3>
<div class="content" id="content1">
<p>這是第一節的內容。</p>
</div>
</div>
<br>
  <div class="panel">
<h3 id="section2">Section 2</h3>
<div class="content" id="content2">
<p>這是第二節的內容。</p>
</div>
</div>
<br>
  <div class="panel">
<h3 id="section3">Section 3</h3>
<div class="content" id="content3">
<p>這是第三節的內容。</p>
</div>
</div>
</div>
<br>
<style>
.panel {
overflow: hidden;
}
<br>
.panel h3 {
cursor: pointer;
padding: 10px;
margin: 0;
background-color: #eee;
}
<br>
.panel .content {
max-height: 0;
transition: max-height 0.5s ease-out;
}
<br>
.panel .content:target {
max-height: 200px;
}
</style>

在上面的代碼中，我們使用了.panel類來設置面板的樣式，包括設置overflow屬性為hidden來隱藏超出面板區域的內容。每個面板包含一個標題和內容區域，標題使用

標簽，內容區域使用<div>標簽，并設置了一個唯一的id。我們通過設置內容區域的max-height屬性為0，使其默認處于折疊狀態。然后，通過.content:target選擇器，當某個內容區域被點擊時，將其max-height屬性設置為非0的值，從而展開內容。
通過以上兩個例子，我們可以看到CSS的div折疊技術的應用方法和效果。我們可以根據具體的需求和設計來使用不同的樣式屬性和選擇器，實現各種折疊效果。希望本文對你了解和應用CSS的div折疊技術有所幫助。