在網(wǎng)頁設(shè)計中，我們經(jīng)常會遇到需要隱藏或顯示某個元素的情況。而常見的做法就是利用 CSS 的 display 屬性來實現(xiàn)。接下來我們將探討如何使用鼠標(biāo)點擊來顯示和隱藏元素，讓頁面更加靈活。

.hidden {
display: none;
}

首先，我們需要在 CSS 中定義一個初始狀態(tài)下是隱藏的 class。我們將其命名為“hidden”，并將其 display 屬性設(shè)為 none。這樣，在初始頁面加載時，被選中的元素就會被隱藏。

<div id="content" class="hidden">
<p>這是要被隱藏的內(nèi)容。</p>
</div>

接著，在 HTML 代碼中，我們需要給要隱藏的元素指定一個 ID，然后將初始狀態(tài)下的隱藏 class 應(yīng)用到該元素。

function toggle() {
var element = document.getElementById("content");
element.classList.toggle("hidden");
}

現(xiàn)在，我們需要使用 JavaScript 來實現(xiàn)點擊事件的監(jiān)聽和切換。我們給一個按鈕添加點擊事件，這個事件可以切換我們剛剛在 CSS 中定義的“hidden” class。具體實現(xiàn)可以使用下面這段代碼。

最后，我們通過 CSS 動畫增加了顯隱的過渡效果，讓頁面變得更加流暢。

.transition {
transition: .5s ease-in-out;
}
.hidden {
opacity: 0;
max-height: 0;
overflow: hidden;
}
.show {
opacity: 1;
max-height: 1000px;
}

我們再次在 CSS 中定義一個過渡效果，將其命名為“transition”。然后，我們對“hidden”類進行了一些修改，使其在切換時具有更好的過渡效果。同時，我們還定義了一個“show”類，當(dāng)元素需要顯示時，將其應(yīng)用該類，以達到更好的過渡效果。

現(xiàn)在，我們就可以使用鼠標(biāo)點擊來隱藏或顯示元素了。