fix 漢堡主項點擊展開

assets/css/style.css

@@ -317,11 +317,6 @@ nav a {
     box-sizing: border-box;
 }
 
-.portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
-.portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
-    display: flex;
-}
-
 .portal-nav .portal-submenu-nested li {
     padding-bottom: 0;
     list-style: none;
@@ -393,15 +388,20 @@ nav a {
     box-sizing: border-box;
 }
 
-.portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
-.portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3,
-.portal-nav .portal-submenu-nested--tier3:hover,
-.portal-nav .portal-submenu-nested--tier3:focus-within {
-    display: flex;
-}
-
 @media (min-width: 992px) {
 
+    .portal-nav .portal-nav__subgroup:hover>.portal-submenu-nested,
+    .portal-nav .portal-nav__subgroup:focus-within>.portal-submenu-nested {
+        display: flex;
+    }
+
+    .portal-nav .portal-nav__subgroup--nested:hover>.portal-submenu-nested--tier3,
+    .portal-nav .portal-nav__subgroup--nested:focus-within>.portal-submenu-nested--tier3,
+    .portal-nav .portal-submenu-nested--tier3:hover,
+    .portal-nav .portal-submenu-nested--tier3:focus-within {
+        display: flex;
+    }
+
     .portal-nav .portal-nav__subgroup>.portal-submenu-nested {
         position: absolute !important;
         left: 100% !important;
@@ -477,9 +477,7 @@ nav a {
             clamp(14px, 2vw + 10px, 32px)
             max(1rem, env(safe-area-inset-bottom, 0px));
         z-index: 10000;
-        overflow-x: hidden;
+        overflow: hidden;
-        overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
         background-color: var(--black);
         grid-template-columns: 1fr;
         grid-template-rows: auto auto minmax(0, 1fr);
@@ -493,6 +491,14 @@ nav a {
         box-sizing: border-box;
     }
 
+    .portal-nav.portal-nav--open .logo,
+    .portal-nav.portal-nav--open .portal-nav__menu-toggle {
+        position: relative;
+        z-index: 2;
+        flex-shrink: 0;
+        background-color: var(--black);
+    }
+
     .portal-nav .logo {
         grid-area: logo;
         justify-self: start;
@@ -602,10 +608,18 @@ nav a {
         flex-direction: column;
         align-items: center;
         gap: 2px;
+        order: 1;
+    }
+
+    .portal-nav>ul>li.open>a {
+        order: 0;
     }
 
     .portal-nav .portal-submenu {
         position: static;
+        top: auto;
+        left: auto;
+        right: auto;
         width: min(100%, 20rem);
         min-width: 0;
         margin: 4px auto 0;
@@ -707,6 +721,18 @@ nav a {
         flex-direction: column;
         align-items: center;
     }
+
+    .portal-nav .portal-submenu,
+    .portal-nav .portal-submenu-nested {
+        list-style: none;
+        margin-left: 0;
+        padding-left: 0;
+    }
+
+    .portal-nav .portal-submenu>li,
+    .portal-nav .portal-submenu-nested>li {
+        list-style: none;
+    }
 }
 
 .portal-nav .portal-submenu>li+li>a[data-coming-soon="true"] {
@@ -818,11 +844,14 @@ a.btn[data-coming-soon="true"],
     display: none !important;
 }
 
-.portal-nav>ul>li:hover>.portal-submenu,
+@media (min-width: 992px) {
-.portal-nav>ul>li:focus-within>.portal-submenu,
+
-.portal-nav>ul>li.open>.portal-submenu {
+    .portal-nav>ul>li:hover>.portal-submenu,
+    .portal-nav>ul>li:focus-within>.portal-submenu,
+    .portal-nav>ul>li.open>.portal-submenu {
         display: grid;
         gap: 6px;
+    }
 }
 
 #particles {
@@ -1778,9 +1807,12 @@ footer a .mark_b {
     overflow: visible;
 }
 
-.map-page .portal-nav>ul>li:hover .portal-submenu,
+@media (min-width: 992px) {
-.map-page .portal-nav>ul>li:focus-within .portal-submenu {
+
+    .map-page .portal-nav>ul>li:hover .portal-submenu,
+    .map-page .portal-nav>ul>li:focus-within .portal-submenu {
         display: grid;
+    }
 }
 
 .map-page .portal-nav .portal-submenu a {
@@ -2294,12 +2326,16 @@ header.map-archive-header {
         position: static;
         min-width: 0;
         margin-top: 6px;
-        display: grid;
+        display: none;
         box-shadow: none;
         background: #fffaf0;
         padding: 8px;
     }
 
+    .map-page .portal-nav>ul>li.open .portal-submenu {
+        display: grid;
+    }
+
     #itinerary-search {
         width: calc(100% - 28px);
     }

assets/js/portal-nav.js

@@ -345,6 +345,7 @@
             const subgroupHead = event.target.closest(".portal-nav__subgroup-head");
             if (subgroupHead) {
                 event.preventDefault();
+                event.stopPropagation();
                 const subgroup = subgroupHead.closest(".portal-nav__subgroup");
                 if (subgroup) subgroup.classList.toggle("open");
                 return;
@@ -352,6 +353,17 @@
 
             const link = event.target.closest("a[href]");
             if (!link || link.classList.contains("logo")) return;
+
+            const topItem = link.closest(".portal-nav > ul > li");
+            const isTopTrigger =
+                topItem &&
+                link === topItem.querySelector(":scope > a") &&
+                topItem.querySelector(":scope > .portal-submenu");
+
+            if (isTopTrigger) {
+                return;
+            }
+
             if (link.getAttribute("data-coming-soon") === "true") return;
             const href = link.getAttribute("href");
             if (href && href !== "#") setPortalNavMenuOpen(nav, false);
@@ -437,7 +449,11 @@
 
                 if (!isPortalNavDesktop()) {
                     event.preventDefault();
+                    event.stopPropagation();
                     if (!isSoon && !item.classList.contains("coming-soon")) {
+                        items.forEach((other) => {
+                            if (other !== item) other.classList.remove("open");
+                        });
                         item.classList.toggle("open");
                     }
                     return;