js

2026-07-31 11:24:19 +08:00 · 2026-07-31 11:24:19 +08:00 · 0b586b359b
parent 2f63038c9f
commit 0b586b359b
3 changed files with 97 additions and 74 deletions
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@ -346,80 +346,103 @@ $(document).ready(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來減少名稱衝突的機會
--- a/assets/stylesheets/template/base/_global.scss
+++ b/assets/stylesheets/template/base/_global.scss
@ -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;
--- a/modules/web_resource/_web_res_widget9.html.erb
+++ b/modules/web_resource/_web_res_widget9.html.erb
@ -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>