This commit is contained in:
ken 2026-07-31 14:23:37 +08:00
parent 1f959a8eac
commit 499adab9b3
5 changed files with 103 additions and 77 deletions

View File

@ -269,80 +269,103 @@ $(function(){
}
},
ClickMenuHandler: function() {
// 處理主選單切換(漢堡 icon
$(document).on('click', '.navbar-toggle', function (e) {
e.preventDefault();
ClickMenuHandler: function() {
// 處理主選單切換(漢堡 icon
$(document).on('click', '.navbar-toggle', function (e) {
e.preventDefault();
// 確保 .navbar-toggle 放到 .modules-menu 後面
$('.mobile-menu').each(function () {
var $menu = $(this);
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
$menu.find('.modules-menu').after($menu.find('.navbar-toggle'));
// 確保 .navbar-toggle 放到 .modules-menu 後面
$('.mobile-menu').each(function () {
var $menu = $(this);
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
$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');
$('body').toggleClass('noscroll');
$('.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) {
// ✅ Tab 鍵跳過 .mobile-menu 時,觸發收合邏輯
$(document).on('focusout', '.mobile-menu', function(e) {
setTimeout(function() {
var $newFocus = $(document.activeElement);
// 焦點已離開 .mobile-menu 且選單是展開狀態
if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) {
// ✅ 直接 trigger click與按下 .navbar-toggle 執行完全相同的動作
$('.navbar-toggle').first().trigger('click');
var $newFocus = $(document.activeElement);
// 焦點在 body 時代表滑鼠正在點擊中,不處理
if ($newFocus.is('body')) return;
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);
});
});
$('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this);
var opencheck1 = $that.hasClass('opened');
if ( opencheck1 == 0 ) {
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
$('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this);
var opencheck1 = $that.hasClass('opened');
if ( opencheck1 == 0 ) {
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck1 == 1) {
$that.siblings('ul').slideUp(500);
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.removeClass('opened');
} else if (opencheck1 == 1) {
$that.siblings('ul').slideUp(500);
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.removeClass('opened');
}
})
}
})
$('.mobile-menu2 > .menu-drop').click(function(){
var $that = $(this);
var opencheck2 = $that.hasClass('opened');
if ( opencheck2 == 0 ) {
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck2 == 1) {
$that.siblings('ul').slideUp(500);
$that.removeClass('opened');
}
})
}
$('.mobile-menu2 > .menu-drop').click(function(){
var $that = $(this);
var opencheck2 = $that.hasClass('opened');
if ( opencheck2 == 0 ) {
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck2 == 1) {
$that.siblings('ul').slideUp(500);
$that.removeClass('opened');
}
})
}
};
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會

View File

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

View File

@ -261,7 +261,7 @@ body {
border-radius: 0.13em;
top: 2em;
@media(max-width: 769px){
top: 1em;
top: 0;
font-size: 1em;
}
}
@ -288,10 +288,12 @@ body {
& > a {
display: block;
padding: 1em;
font-family: $main-font;
font-size: 1em;
color: #fff;
@media(max-width:768px){
padding: 0.5em;
}
&:after{
content:'';
position:absolute;

View File

@ -845,7 +845,8 @@ a.ui-state-default{
position: absolute;
right: 5em;
color: #fff;
margin-top: 1em;
margin-top: 0;
top: 1em;
}
}
.search-box{

View File

@ -9,7 +9,7 @@
<div class="link-img-wrap{{display_image}}">
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</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 class="label status {{status-class}}">{{status}}</span>
</span>