astro 默认对组件内脚本进行作用域隔离，导致页面跳转后事件监听失效；需使用 is:global 指令将导航交互逻辑提升至全局作用域，确保跨路由时菜单开关功能持续生效。
astro 默认对组件内脚本进行作用域隔离，导致页面跳转后事件监听失效；需使用 is:global 指令将导航交互逻辑提升至全局作用域，确保跨路由时菜单开关功能持续生效。
在 Astro 中，组件内的 <script> 标签默认以 <strong>客户端组件作用域（client-side scoped） 方式执行：Astro 会将其编译为模块化、按需加载的 JS，并在组件卸载时自动清理事件监听器。这虽有利于性能与隔离性，但也会带来一个常见陷阱——<strong>当用户通过 Astro 的内置导航（如点击 <a href="/generals">）跳转到新页面时，原 <Header /> 组件被销毁，其内部的 DOMContentLoaded 监听器及后续绑定的 click 事件也随之消失。因此，返回首页或切换页面后再次点击汉堡图标，ion-icon 事件不再响应，下拉菜单无法展开。</script>
✅ 正确解法：使用 is:global 提升脚本作用域
只需将 <script> 标签添加 is:global 指令，即可让该脚本在页面首次加载时执行一次，并<strong>永久保留在全局上下文（window）中，不受 Astro 页面级组件生命周期影响：</script>
<script is:global>
document.addEventListener("DOMContentLoaded", () => {
const icon = document.querySelector("ion-icon");
const menuList = document.querySelector("nav ul");
if (!icon || !menuList) return;
icon.addEventListener("click", () => {
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");
}
});
});
</script>
? 优化说明：
- 添加了 if (!icon || !menuList) return; 防御性检查，避免 DOM 元素不存在时报错；
- 使用 classList.add() / remove() 批量操作，语义更清晰、性能更优；
- 移除了硬编码的 ! 非空断言（document.querySelector(...)!），增强健壮性。
⚠️ 注意事项与进阶建议
- is:global 不等于“全局污染”：它仅表示脚本在页面初始化阶段执行一次，不创建全局变量（除非你显式声明 window.xxx），符合现代前端最佳实践；
- 避免重复绑定：由于 is:global 脚本只运行一次，无需担心多次点击导致监听器叠加；
-
替代方案（推荐用于大型项目）：
将所有全局交互逻辑统一提取至 src/scripts/nav-toggle.js，并在 Layout.astro 的 中通过 <script src="/scripts/nav-toggle.js" defer></script> 引入。这样更易维护、支持 Tree-shaking，也便于添加 TypeScript 类型定义； -
CSS 状态同步提示：当前样式依赖 top-[80px] 和 opacity-100 控制显示，建议为
- 添加过渡类 transition-all duration-300 ease-in-out 保持动效一致性（已在原代码中存在，确认保留即可）。
通过 is:global 修正后，无论用户从首页跳转至 /generals、/pricing 或任意路由，移动端导航菜单均可稳定响应点击，实现真正的“一次编写、全站可用”。这是 Astro 开发中处理跨路由 UI 状态管理的关键技巧之一。
