This commit is contained in:
ken 2026-07-31 14:31:58 +08:00
parent c61caa3291
commit 1dbc9a5f32
3 changed files with 97 additions and 74 deletions

View File

@ -292,80 +292,103 @@
} }
}, },
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來減少名稱衝突的機會

View File

@ -26,16 +26,16 @@
} }
} }
} }
label[for="open-orbit-login"] { // label[for="open-orbit-login"] {
@media(max-width:768px){ // @media(max-width:768px){
display: none!important; // display: none!important;
} // }
} // }
[accesskey="U"],[accesskey="W"]{ // [accesskey="U"],[accesskey="W"]{
@media(max-width:768px){ // @media(max-width:768px){
color: #666!important; // color: #666!important;
} // }
} // }
.orbit-bar-inner{ .orbit-bar-inner{
[accesskey="U"]{ [accesskey="U"]{
height: 40px; height: 40px;

View File

@ -9,7 +9,7 @@
<div class="link-img-wrap{{display_image}}"> <div class="link-img-wrap{{display_image}}">
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"> <img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div> </div>
<a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a> <a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}" onclick="{{onclick}}">{{title}}</a>
<span data-list="statuses" data-level="1"> <span data-list="statuses" data-level="1">
<span class="label status {{status-class}}">{{status}}</span> <span class="label status {{status-class}}">{{status}}</span>
</span> </span>