This commit is contained in:
ken 2026-07-31 10:21:54 +08:00
parent bb468456df
commit d829b4860e
1 changed files with 86 additions and 63 deletions

View File

@ -292,80 +292,103 @@ $(function() {
} }
}, },
ClickMenuHandler: function() { ClickMenuHandler: function() {
// 處理主選單切換(漢堡 icon) // 處理主選單切換(漢堡 icon)
$(document).on('click', '.navbar-toggle', function (e) { $(document).on('click', '.navbar-toggle', function (e) {
e.preventDefault(); e.preventDefault();
// 確保 .navbar-toggle 放到 .modules-menu 後面 // 確保 .navbar-toggle 放到 .modules-menu 後面
$('.mobile-menu').each(function () { $('.mobile-menu').each(function () {
var $menu = $(this); var $menu = $(this);
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) { if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
$menu.find('.modules-menu').after($menu.find('.navbar-toggle')); $menu.find('.modules-menu').after($menu.find('.navbar-toggle'));
}
});
$('.mobile-menu').toggleClass('active');
$('body').toggleClass('noscroll');
// ★ 修正:依據 active 狀態決定 collapsed 的加/移除
if ($('.mobile-menu').hasClass('active')) {
$('.mobile-menu .navbar-toggle').removeClass('collapsed'); // 打開 → 叉叉
} else {
$('.mobile-menu .navbar-toggle').addClass('collapsed'); // 關閉 → 三條橫線
}
// 關閉所有下拉選單
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
// 無障礙:聚焦第一個互動元素
if ($('.mobile-menu').hasClass('active')) {
setTimeout(function () {
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
}, 100);
} }
}); });
$('.mobile-menu').toggleClass('active'); // ✅ Tab 鍵跳過 .mobile-menu 時,觸發收合邏輯
$('body').toggleClass('noscroll'); $(document).on('focusout', '.mobile-menu', function(e) {
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
// 關閉所有下拉選單
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
// 無障礙:聚焦第一個互動元素
if ($('.mobile-menu').hasClass('active')) {
setTimeout(function () {
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
}, 100);
}
});
// ✅ Tab 鍵跳過 .navbar-toggle 時,觸發與點擊相同的收合邏輯
$(document).on('focusout', '.mobile-menu', function(e) {
setTimeout(function() { setTimeout(function() {
var $newFocus = $(document.activeElement); var $newFocus = $(document.activeElement);
// 焦點已離開 .mobile-menu 且選單是展開狀態
if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) { // 焦點在 body 時代表滑鼠正在點擊中,不處理
// ✅ 直接 trigger click,與按下 .navbar-toggle 執行完全相同的動作 if ($newFocus.is('body')) return;
$('.navbar-toggle').first().trigger('click');
if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) {
var $btn = $('.navbar-toggle').first();
if ($btn.attr('data-bs-toggle')) {
var target = $btn.attr('data-bs-target');
var bsCollapse = window.bootstrap && bootstrap.Collapse.getInstance($(target)[0]);
if (bsCollapse) bsCollapse.hide();
$('.mobile-menu').removeClass('active');
$('body').removeClass('noscroll');
$('.mobile-menu .navbar-toggle').addClass('collapsed');
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
} else {
$btn.trigger('click');
} }
}
}, 50); }, 50);
}); });
$('.mobile-menu1 > .menu-drop').click(function(){ $('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this); var $that = $(this);
var opencheck1 = $that.hasClass('opened'); var opencheck1 = $that.hasClass('opened');
if ( opencheck1 == 0 ) { if ( opencheck1 == 0 ) {
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500); $('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened'); $('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500); $('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened'); $('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.siblings('ul').slideDown(500); $that.siblings('ul').slideDown(500);
$that.addClass('opened'); $that.addClass('opened');
} else if (opencheck1 == 1) { } else if (opencheck1 == 1) {
$that.siblings('ul').slideUp(500); $that.siblings('ul').slideUp(500);
$('.mobile-menu2 > ul').slideUp(500); $('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened'); $('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.removeClass('opened'); $that.removeClass('opened');
} }
}) })
$('.mobile-menu2 > .menu-drop').click(function(){ $('.mobile-menu2 > .menu-drop').click(function(){
var $that = $(this); var $that = $(this);
var opencheck2 = $that.hasClass('opened'); var opencheck2 = $that.hasClass('opened');
if ( opencheck2 == 0 ) { if ( opencheck2 == 0 ) {
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500); $('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened'); $('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
$that.siblings('ul').slideDown(500); $that.siblings('ul').slideDown(500);
$that.addClass('opened'); $that.addClass('opened');
} else if (opencheck2 == 1) { } else if (opencheck2 == 1) {
$that.siblings('ul').slideUp(500); $that.siblings('ul').slideUp(500);
$that.removeClass('opened'); $that.removeClass('opened');
} }
}) })
} }
}; };
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會 // 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會