CSS可以通過display屬性實(shí)現(xiàn)點(diǎn)擊時(shí)顯示或隱藏某個(gè)元素。

//HTML結(jié)構(gòu)
<div class="box">
<p>可以點(diǎn)擊顯示和隱藏的內(nèi)容</p>
</div>
//CSS樣式
.box{
position:relative;
}
.box p{
position:absolute;
top:0;
left:0;
width:100%;
padding:10px;
background-color:#f5f5f5;
display:none;//初始時(shí)隱藏
}
.box.active p{
display:block;//點(diǎn)擊時(shí)顯示
}

在HTML結(jié)構(gòu)中，通過一個(gè)類名為"box"的div元素包裹了需要點(diǎn)擊顯示和隱藏的內(nèi)容，這里使用一個(gè)p標(biāo)簽來表示內(nèi)容。在CSS樣式中，為了控制p標(biāo)簽的顯示和隱藏，box元素的position屬性設(shè)置為relative，p標(biāo)簽的position屬性設(shè)置為absolute，這樣就可以讓p標(biāo)簽相對(duì)于box元素定位。同時(shí)給p標(biāo)簽設(shè)置一個(gè)display:none的屬性，初始時(shí)p標(biāo)簽是隱藏的。

接下來是JavaScript代碼，當(dāng)用戶點(diǎn)擊box元素時(shí)，給box元素添加一個(gè)"active"類名，同時(shí)p標(biāo)簽的display屬性設(shè)置為block，這樣就可以將p標(biāo)簽顯示出來。如果用戶再次點(diǎn)擊box元素，就會(huì)移除"active"類名，p標(biāo)簽就會(huì)被隱藏。

//JavaScript代碼
var box = document.querySelector('.box');
box.addEventListener('click', function(){
box.classList.toggle('active');
});

使用classList.toggle方法給box元素添加或移除"active"類名，這里使用了toggle方法是為了讓用戶可以再次點(diǎn)擊box元素來隱藏p標(biāo)簽。