Astro组件移动端导航栏页面跳转后失效问题求助

问题描述 #

小屏设备下，未跳转页面时导航栏可正常展开和收起；但点击导航选项（如Características）跳转页面后，再次点击菜单按钮无法展开导航栏。

原因分析 #

由于使用了Astro的ViewTransitions组件，页面跳转时会保留部分DOM状态（比如菜单按钮的name属性可能停留在"close"），但新页面的导航菜单是初始收起状态（top-[-400px]、opacity-0）。此时点击按钮，代码判断当前按钮是"close"状态，会执行收起逻辑，导致菜单无法展开。

修复方案 #

1. 强制重置页面加载时的菜单状态 #

修改Header组件中的<script>部分，在DOM加载完成后先强制重置按钮和菜单的状态：

document.addEventListener("DOMContentLoaded", function () {
    const icon = document.querySelector("ion-icon")!;
    const menuList = document.querySelector("ul")!;

    // 页面加载时强制重置状态
    icon.setAttribute("name", "menu");
    menuList.classList.remove("top-[80px]", "opacity-100", "z-10");

    icon.addEventListener("click", function () {
        if (icon.getAttribute("name") === "menu") {
            icon.setAttribute("name", "close");
            menuList.classList.add("top-[80px]", "opacity-100", "z-10");
        } else {
            icon.setAttribute("name", "menu");
            menuList.classList.remove("top-[80px]", "opacity-100", "z-10");
        }
    });
});

2. 优化逻辑（可选） #

可以用一个CSS类来统一控制菜单显示/隐藏，让代码更简洁易维护：

首先给ul添加自定义类mobile-menu：

<ul class="mobile-menu md:flex md:items-center md:z-auto md:static absolute w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">

然后修改script代码：

document.addEventListener("DOMContentLoaded", function () {
    const icon = document.querySelector("ion-icon")!;
    const menuList = document.querySelector(".mobile-menu")!;

    // 重置初始状态
    icon.setAttribute("name", "menu");
    menuList.classList.remove("active");

    icon.addEventListener("click", function () {
        const isMenuOpen = icon.getAttribute("name") === "close";
        icon.setAttribute("name", isMenuOpen ? "menu" : "close");
        menuList.classList.toggle("active", !isMenuOpen);
    });
});

同时在<style>中添加激活状态样式：

.mobile-menu.active {
    top: 80px;
    opacity: 1;
    z-index: 10;
}

这样后续修改样式只需调整CSS类，无需改动JS代码。

内容的提问来源于stack exchange，提问作者carloslopez