JavaScript 中經(jīng)常使用顯示隱藏事件，這個事件的目的是在頁面中的某個元素中點(diǎn)擊時顯示另外一個元素。同時，這個事件還很實(shí)用，例如在頁面用戶操作某個元素，想要展示更多的信息的時候，就可以使用顯示隱藏事件。下面，我們就來看一些實(shí)用的例子。

首先，我們來看一個給頁面的菜單添加下拉效果的例子。當(dāng)我們點(diǎn)擊菜單時，會彈出下拉框，再次點(diǎn)擊則會將下拉框收起。代碼如下：

var btn = document.querySelector('.menu-button'),
drop = document.querySelector('.drop-menu');
btn.addEventListener('click', function(){
if(drop.classList.contains('show')){
drop.classList.remove('show');
}else{
drop.classList.add('show');
}
});

接下來，我們再來看一個在網(wǎng)頁中添加二級菜單的例子。當(dāng)我們點(diǎn)擊一級菜單時，二級菜單會展開，再次點(diǎn)擊則隱藏。代碼如下：

var menu = document.querySelectorAll('.dropdown');
for(var i = 0; i< menu.length; i++){
menu[i].addEventListener('click', function(){
if(this.classList.contains('show')){
this.classList.remove('show');
}else{
this.classList.add('show');
}
})
}

最后，我們來看一個很實(shí)用的例子，如何實(shí)現(xiàn)在網(wǎng)頁中只顯示特定的內(nèi)容，同時將其他內(nèi)容隱藏。比如，在一個網(wǎng)頁中的左側(cè)有菜單列表，右側(cè)是相應(yīng)的內(nèi)容展示區(qū)域，點(diǎn)擊不同的菜單列表項(xiàng)，會顯示對應(yīng)的內(nèi)容。代碼如下：

var tabs = document.querySelectorAll('.tab'),
content = document.querySelectorAll('.content');
for(var i = 0; i< tabs.length; i++){
tabs[i].addEventListener('click', function(){
for(var j = 0; j< content.length; j++){
content[j].classList.remove('show');
}
var target = this.dataset.target;
document.getElementById(target).classList.add('show');
})
}

以上就是 JavaScript 中的顯示隱藏事件，我們可以通過這個事件來實(shí)現(xiàn)網(wǎng)頁的各種操作。希望這些例子能夠幫助大家更好地理解這個事件。