在網路開發中，我們經常需要透過JavaScript實現隱藏和顯示元素的功能來提升使用者互動體驗。其中經典的一個場景就是點擊按鈕隱藏或顯示一個元素。以下將介紹如何使用JavaScript來實作這個功能。
一、HTML結構
首先，我們需要在HTML中建立一個按鈕和一個要隱藏或顯示的div：
二、CSS樣式
我們可以為按鈕和div添加CSS樣式，使其更加美觀和易於操作：
这是要隐藏或显示的div
三、JavaScript代碼
#接下來，我們需要使用JavaScript程式碼來實現隱藏和顯示div的功能。我們可以使用事件監聽器來監聽按鈕的點擊事件，並使用CSS樣式來控制div的顯示和隱藏。
首先，我們需要定義一個變數來表示div的狀態，初始狀態為顯示，定義為true：
let isShown = true;
然後，我們可以使用querySelector方法來取得按鈕和要隱藏或顯示的div的DOM元素：
const toggleBtn = document.querySelector('#toggle-btn');
const toggleDiv = document.querySelector('#toggle-div');接下來，我們需要綁定點擊事件，即當用戶點擊按鈕時，執行以下操作：
toggleBtn.addEventListener('click', function() {
if(isShown) {
toggleDiv.style.display = 'none';
isShown = false;
} else {
toggleDiv.style.display = 'block';
isShown = true;
}
});在這段程式碼中，我們判斷div的狀態是否為顯示狀態，如果是，則將其設為隱藏狀態，同時更新狀態變量，反之亦然。
完整程式碼：
这是要隐藏或显示的div
四、最佳化
上述程式碼可以實現隱藏和顯示div的功能，但程式碼存在一些冗餘，可以進行最佳化。
首先，我們可以使用toggle方法來切換div的顯示和隱藏狀態：
toggleBtn.addEventListener('click', function() {
toggleDiv.style.display = isShown ? 'none' : 'block';
isShown = !isShown;
});其次，我們可以將樣式定義移至CSS中，以提高程式碼的可維護性：
#toggle-btn {
background-color: #fff;
color: #333;
border: 1px solid #333;
padding: 5px 10px;
}
#toggle-div {
background-color: #f5f5f5;
padding: 10px;
}最終優化後的完整程式碼：
这是要隐藏或显示的div
五、總結
使用JavaScript實作隱藏和顯示元素功能是Web開發中很常見的一種場景。透過事件監聽器、操作CSS樣式和控制元素狀態能夠很好地實現這項功能，提高使用者互動體驗。優化程式碼可以進一步提高程式碼的可讀性和可維護性，提高開發效率。
以上是如何使用JavaScript來實現div隱藏顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
