👨‍🍳 食譜分享

在家也能做的美味料理

document.addEventListener('DOMContentLoaded', () => { // --- 1. 處理捲動時,目錄項目高亮顯示的邏輯 --- const sections = document.querySelectorAll('h2[id], h3[id], h4[id], h5[id]'); const tocLinks = document.querySelectorAll('#toc-sidebar a'); const observer = new IntersectionObserver((entries) => { let latestIntersectingEntry = null; entries.forEach(entry => { if (entry.isIntersecting) { if (!latestIntersectingEntry || entry.boundingClientRect.top < latestIntersectingEntry.boundingClientRect.top) { latestIntersectingEntry = entry; } } }); if (latestIntersectingEntry) { const activeId = latestIntersectingEntry.target.getAttribute('id'); tocLinks.forEach(link => { link.classList.remove('active'); const linkHref = link.getAttribute('href').substring(1); if (linkHref === activeId) { link.classList.add('active'); const parentSubmenu = link.closest('.submenu'); if (parentSubmenu && !parentSubmenu.parentElement.classList.contains('open')) { parentSubmenu.parentElement.classList.add('open'); } } }); } }, { rootMargin: '0px 0px -80% 0px' }); sections.forEach(section => { observer.observe(section); }); // --- 2. 處理點擊時,目錄展開/收合的邏輯 --- const toc = document.querySelector('#toc-sidebar'); toc.addEventListener('click', function(event) { const targetLink = event.target.closest('a'); if (!targetLink) return; if (targetLink.classList.contains('has-submenu')) { event.preventDefault(); targetLink.parentElement.classList.toggle('open'); } }); /* --- ★★★ 關鍵修正 #2 ★★★ (行動版漢堡選單功能) --- */ const body = document.body; const menuToggle = document.getElementById('menu-toggle'); const sidebar = document.getElementById('toc-sidebar'); // 開關選單的邏輯改為直接在 body 上切換 class menuToggle.addEventListener('click', (event) => { event.stopPropagation(); body.classList.toggle('mobile-menu-open'); }); // 點擊遮罩層或側邊欄裡的「最終連結」時,關閉選單 document.addEventListener('click', (event) => { // 如果 body 是開啟狀態,且點擊的不是側邊欄本身或漢堡按鈕 if (body.classList.contains('mobile-menu-open') && !sidebar.contains(event.target) && !menuToggle.contains(event.target)) { body.classList.remove('mobile-menu-open'); } // 如果點擊的是側邊欄裡的最終連結 (不是 has-submenu 的那種) if (event.target.closest('a') && !event.target.closest('a').classList.contains('has-submenu') && sidebar.contains(event.target)) { body.classList.remove('mobile-menu-open'); } }); });