<div>點擊展開收縮是一種常見的網頁交互效果，它可以通過點擊一個元素，來控制另一個元素的顯示或隱藏。在網頁設計和開發中，我們經常需要使用這種效果來提高用戶體驗和交互性。本文將通過幾個代碼案例來詳細解釋說明div點擊展開收縮的實現方式。
案例一：基礎實現方法
<html>
<head>
<style>
.collapse {
display: none;
}
</style>
<script>
function toggleCollapse() {
var collapseDiv = document.getElementById("collapseDiv");
if (collapseDiv.style.display === "none") {
collapseDiv.style.display = "block";
} else {
collapseDiv.style.display = "none";
}
}
</script>
</head>
<body>
<div onclick="toggleCollapse()">點擊展開</div>
<div id="collapseDiv" class="collapse">收縮內容</div>
</body>
</html>以上是一個最基礎的實現方法。在CSS中，我們將要展開收縮的內容設置為隱藏（display: none;）。然后，在JavaScript中，我們定義了一個toggleCollapse函數，當點擊展開的div時，會通過獲取目標div的樣式，來決定其顯示或隱藏。點擊事件綁定在要展開的div上，通過修改該div的display屬性來實現展開和收縮。
案例二：使用jQuery庫來簡化代碼
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$(".trigger").click(function() {
$("#collapseDiv").toggle();
});
});
</script>
</head>
<body>
<div class="trigger">點擊展開</div>
<div id="collapseDiv" class="collapse">收縮內容</div>
</body>
</html>在這個案例中，我們使用了jQuery庫來簡化代碼。，在head標簽中引入jQuery庫的鏈接。然后，在JavaScript中，我們使用了.ready()函數來確保文檔加載完成后再執行代碼。通過選擇器選中要點擊的元素（類名為trigger的div），并使用click()函數來綁定點擊事件。當點擊該div時，通過.toggle()函數來切換目標div的顯示和隱藏狀態，使其展開或收縮。
案例三：使用CSS樣式實現動畫效果
<html>
<head>
<style>
.collapse {
height: auto;
overflow: hidden;
transition: height 0.5s;
}
<br>
.expand {
height: 0;
overflow: hidden;
transition: height 0.5s;
}
</style>
<script>
function toggleCollapse() {
var collapseDiv = document.getElementById("collapseDiv");
if (collapseDiv.classList.contains("collapse")) {
collapseDiv.classList.remove("collapse");
collapseDiv.classList.add("expand");
} else {
collapseDiv.classList.remove("expand");
collapseDiv.classList.add("collapse");
}
}
</script>
</head>
<body>
<div onclick="toggleCollapse()">點擊展開</div>
<div id="collapseDiv" class="collapse">收縮內容</div>
</body>
</html>這個案例中，我們添加了一些CSS樣式來實現動畫效果。，在CSS中，我們分別定義了.collapse和.expand兩個類，分別用于收縮和展開的狀態。通過設置height為auto實現自適應高度，overflow:hidden來隱藏內容，以及transition屬性來定義動畫時間。在JavaScript中，我們使用classList來切換目標div的收縮和展開類，從而觸發CSS中定義的動畫效果。
以上是幾個常見的div點擊展開收縮的實現方式，我們可以根據實際需求選擇適合的方法來實現這一交互效果。通過合理運用CSS樣式和JavaScript代碼，我們可以為用戶提供更好的交互體驗，使網頁更加靈動和易用。