jQuery 點擊鏈接顯示隱藏 DIV 的完整實現與路徑排查

功能代碼

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
$(function() {
    $("#pteacher a").click(function(e) {
        e.preventDefault(); // 阻止鏈接跳轉
        $("#divteacher").toggle(); // 切換顯示/隱藏
    });
});
</script>

<body>
<p id="pteacher"><a href="#">老師</a></p>
<div id="divteacher" style="display:none;">
    <table>...權限勾選內容...</table>
</div>
</body>

關鍵點

1. 選擇器精確：$("#pteacher a") 針對鏈接而非段落，避免事件冒泡誤觸發。
2. 阻止默認行為：e.preventDefault() 防止 href="#" 導致頁面跳頂。
3. 使用 toggle()：一行代碼實現顯示/隱藏切換。

常見故障：jQuery 路徑失效

原代碼 src="media/js/jquery-1.10.1.min.js" 為相對路徑，部署時易 404。建議：

• 使用 CDN：https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
• 或本地放置於項目 webapp/js/，引用 ${pageContext.request.contextPath}/js/jquery.min.js。
• F12 Console 確認無 jQuery is not defined 錯誤。

進階：動畫效果

$("#divteacher").slideToggle(300); // 滑動切換
// 或
$("#divteacher").fadeToggle(300);  // 淡入淡出

無障礙增強

<a href="#" role="button" aria-expanded="false" aria-controls="divteacher">老師</a>

JS 中同步更新 aria-expanded，提升屏幕閱讀器體驗。

確保 jQuery 正確加載、選擇器精準、阻止默認跳轉，即可實現點擊鏈接平滑顯示/隱藏 DIV。