展開(kāi)收起是一種常用的CSS交互效果，它的原理是通過(guò)CSS的偽類(lèi)和屬性來(lái)控制元素的顯示與隱藏。一般情況下，我們需要通過(guò)JavaScript來(lái)實(shí)現(xiàn)這個(gè)效果，但是如果只是簡(jiǎn)單的展開(kāi)收起，我們完全可以只用CSS來(lái)實(shí)現(xiàn)。 下面是一個(gè)簡(jiǎn)單的展開(kāi)收起示例，我們先用HTML和CSS實(shí)現(xiàn)一個(gè)基礎(chǔ)的布局：

<p class="content">這是一段內(nèi)容，它很長(zhǎng)很長(zhǎng)，但是初始狀態(tài)只顯示3行，多余的部分被隱藏。</p>
<style>
.content {
font-size: 16px;
line-height: 1.5;
max-height: 4.5em;
overflow: hidden;
}
</style>

在樣式中，我們?cè)O(shè)置`max-height`屬性為`4.5em`，也就是只顯示3行內(nèi)容，超過(guò)這個(gè)高度的部分被隱藏，同時(shí)設(shè)置`overflow`屬性為`hidden`，讓多余內(nèi)容隱藏不顯示。 下面是展開(kāi)收起的實(shí)現(xiàn)，我們利用CSS3的`:checked`偽類(lèi)和`~`兄弟選擇器來(lái)實(shí)現(xiàn)。首先在HTML中加入一個(gè)復(fù)選框和標(biāo)簽：

<input type="checkbox" id="toggle" class="toggle">
<label for="toggle" class="more">>>展開(kāi)全文</label>

然后在樣式中加入以下代碼：

.toggle {
display: none;
}
.more {
display: inline-block;
cursor: pointer;
color: blue;
margin-top: 10px;
}
.more:hover {
text-decoration: underline;
}
.more::before {
content: ">>";
margin-right: 5px;
}
.more:hover::before {
text-decoration: none;
}
.toggle:checked ~ .content {
max-height: none;
}

其中，`.toggle`是我們加入的復(fù)選框，設(shè)置為`display: none`，隱藏不顯示。`.more`是我們加入的標(biāo)簽，作為展開(kāi)收起的按鈕，設(shè)置了一些樣式，鼠標(biāo)懸停時(shí)會(huì)顯示下劃線(xiàn)。 `.toggle:checked ~ .content`表示當(dāng)復(fù)選框選中狀態(tài)時(shí)，它后面的所有同級(jí)元素中的`.content`元素的`max-height`屬性為`none`，也就是完全展開(kāi)，顯示全部?jī)?nèi)容。 這樣，我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的展開(kāi)收起效果，同時(shí)只用了HTML和CSS，沒(méi)有用到JavaScript。