JavaScript 實現兩個鏈接互斥顯示/隱藏的交互邏輯

需求描述

頁面中有兩個 <a> 標籤（a1、a2）：

• a1 始終顯示
• 點擊 a1 時，顯示 a2
• 點擊 a2 時，隱藏 a2

實現思路

使用 JavaScript 監聽點擊事件，透過切換 a2 的 CSS display 或 visibility 屬性來控制顯示/隱藏。為了避免事件冒泡導致誤觸發，建議在 a2 的點擊處理中呼叫 event.stopPropagation()。

完整代碼範例

<a id="a1" href="javascript:void(0);">顯示 a2</a>
<a id="a2" href="javascript:void(0);" style="display:none;">點我隱藏</a>

<script>
const a1 = document.getElementById('a1');
const a2 = document.getElementById('a2');

a1.addEventListener('click', () => {
    a2.style.display = 'inline'; // 或 'block'
});

a2.addEventListener('click', (e) => {
    e.stopPropagation(); // 防止觸發 a1 的邏輯
    a2.style.display = 'none';
});
</script>

進階：使用 CSS Class 切換

若專案規範要求樣式與行為分離，可定義 .hidden { display: none; }，然後透過 classList.toggle('hidden') 切換。

注意事項

• 若 a2 內部包含可交互元素（如表單），隱藏前應確保表單數據已保存或提交。
• 無障礙訪問：為 a1 添加 aria-expanded、aria-controls 屬性，提升屏幕閱讀器體驗。