在網(wǎng)頁開發(fā)中，我們經(jīng)常需要對一些內容進行單擊彈出的操作，比如點擊一個按鈕彈出下拉菜單。使用 CSS div 單擊彈出是實現(xiàn)這一需求的一種簡單而有效的方法。

首先，我們需要定義一個 div 元素，通過 CSS 設定其寬度、高度、背景色等樣式。然后我們可以使用 CSS 偽類:hover來實現(xiàn)鼠標經(jīng)過 div 元素時的樣式變化。接著，我們可以使用 CSS 偽類:active來實現(xiàn)鼠標點擊 div 元素時的樣式變化。

div {
width: 100px;
height: 50px;
background-color: #ccc;
}
div:hover {
background-color: #aaa;
}
div:active {
background-color: #555;
}

現(xiàn)在我們已經(jīng)完成了基本的樣式設置。接下來需要使用 JavaScript 為 div 元素添加單擊事件。在單擊事件里，我們可以使用classList.toggle方法來切換指定元素的 class 屬性。切換后，我們可以通過 CSS 來控制元素的顯示與隱藏。

div.onclick = function() {
this.classList.toggle('active');
}

最后要完成的就是 CSS 中的 display 屬性設置了。當 div 元素沒有 .active 類時，我們將其 display 屬性設置成 none，這樣就可以隱藏該元素。當 .active 類被添加到該元素時，我們將其 display 屬性設置成 block，這樣它就會顯示。

div {
width: 100px;
height: 50px;
background-color: #ccc;
display: none;
}
div.active {
display: block;
}

最終代碼如下：

點擊我彈出內容

由于本方法比較簡單，適用范圍較廣，可以應用于對話框，下拉菜單等，給用戶帶來了良好的交互體驗。