案例一：基礎(chǔ)實(shí)現(xiàn)方法
<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()">點(diǎn)擊展開</div>
<div id="collapseDiv" class="collapse">收縮內(nèi)容</div>
</body>
</html>以上是一個(gè)最基礎(chǔ)的實(shí)現(xiàn)方法。在CSS中，我們將要展開收縮的內(nèi)容設(shè)置為隱藏（display: none;）。然后，在JavaScript中，我們定義了一個(gè)toggleCollapse函數(shù)，當(dāng)點(diǎn)擊展開的div時(shí)，會(huì)通過獲取目標(biāo)div的樣式，來決定其顯示或隱藏。點(diǎn)擊事件綁定在要展開的div上，通過修改該div的display屬性來實(shí)現(xiàn)展開和收縮。
案例二：使用jQuery庫來簡(jiǎn)化代碼
<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">點(diǎn)擊展開</div>
<div id="collapseDiv" class="collapse">收縮內(nèi)容</div>
</body>
</html>在這個(gè)案例中，我們使用了jQuery庫來簡(jiǎn)化代碼。，在head標(biāo)簽中引入jQuery庫的鏈接。然后，在JavaScript中，我們使用了.ready()函數(shù)來確保文檔加載完成后再執(zhí)行代碼。通過選擇器選中要點(diǎn)擊的元素（類名為trigger的div），并使用click()函數(shù)來綁定點(diǎn)擊事件。當(dāng)點(diǎn)擊該div時(shí)，通過.toggle()函數(shù)來切換目標(biāo)div的顯示和隱藏狀態(tài)，使其展開或收縮。
案例三：使用CSS樣式實(shí)現(xiàn)動(dòng)畫效果
<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()">點(diǎn)擊展開</div>
<div id="collapseDiv" class="collapse">收縮內(nèi)容</div>
</body>
</html>這個(gè)案例中，我們添加了一些CSS樣式來實(shí)現(xiàn)動(dòng)畫效果。，在CSS中，我們分別定義了.collapse和.expand兩個(gè)類，分別用于收縮和展開的狀態(tài)。通過設(shè)置height為auto實(shí)現(xiàn)自適應(yīng)高度，overflow:hidden來隱藏內(nèi)容，以及transition屬性來定義動(dòng)畫時(shí)間。在JavaScript中，我們使用classList來切換目標(biāo)div的收縮和展開類，從而觸發(fā)CSS中定義的動(dòng)畫效果。
以上是幾個(gè)常見的div點(diǎn)擊展開收縮的實(shí)現(xiàn)方式，我們可以根據(jù)實(shí)際需求選擇適合的方法來實(shí)現(xiàn)這一交互效果。通過合理運(yùn)用CSS樣式和JavaScript代碼，我們可以為用戶提供更好的交互體驗(yàn)，使網(wǎng)頁更加靈動(dòng)和易用。