diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index f76f107..4ec8c74 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -3632,40 +3632,48 @@ $(document).ready(function(){ fixGoogleMapIframeTitle(); }); $(function() { - // 點擊/Enter/Space 按鈕:獨立切換子選單展開狀態,不影響上方連結的跳轉行為 - $(document).on('click', '#main-nav .submenu-toggle', function(e) { - e.stopPropagation(); - var $btn = $(this); - var $li = $btn.closest('li'); - var expanded = $btn.attr('aria-expanded') === 'true'; + function initMenuAria() { + // 確保所有具子選單的項目初始狀態為收合 + $('#main-nav a[aria-haspopup="true"]').attr('aria-expanded', 'false'); + } + initMenuAria(); - $btn.attr('aria-expanded', String(!expanded)); - $li.toggleClass('submenu-open', !expanded); - // 這裡同步你原本用來顯示/隱藏子選單的 class 或邏輯 - }); - - // 鍵盤焦點移入連結時,維持原本的自動展開行為(方便直接 Tab 進子選單) + // 鍵盤焦點移入該選單項目時,同步標記為展開 $(document).on('focusin', '#main-nav li', function() { - var $li = $(this); - var $btn = $li.children('.submenu-toggle').first(); - if ($btn.length) { - $btn.attr('aria-expanded', 'true'); - $li.addClass('submenu-open'); + var $link = $(this).children('a[aria-haspopup="true"]').first(); + if ($link.length) { + $link.attr('aria-expanded', 'true'); } }); + // 滑鼠移入時同步(維持與滑鼠操作一致的狀態) + $(document).on('mouseenter', '#main-nav li', function() { + var $link = $(this).children('a[aria-haspopup="true"]').first(); + if ($link.length) { + $link.attr('aria-expanded', 'true'); + } + }); + + // 焦點真正離開該項目(含其子選單)時才收合,避免在子選單內移動時誤收合上層 $(document).on('focusout', '#main-nav li', function() { var $li = this; setTimeout(function() { if (!$.contains($li, document.activeElement) && document.activeElement !== $li) { - var $btn = $($li).children('.submenu-toggle').first(); - if ($btn.length) { - $btn.attr('aria-expanded', 'false'); - $($li).removeClass('submenu-open'); + var $link = $($li).children('a[aria-haspopup="true"]').first(); + if ($link.length) { + $link.attr('aria-expanded', 'false'); } } }, 0); }); + + // 滑鼠移出時同步收合 + $(document).on('mouseleave', '#main-nav li', function() { + var $link = $(this).children('a[aria-haspopup="true"]').first(); + if ($link.length) { + $link.attr('aria-expanded', 'false'); + } + }); });