astro 默认对组件内脚本进行作用域隔离，导致页面跳转后事件监听丢失；通过 is:global 指令将导航栏交互逻辑提升为全局脚本，即可修复移动端菜单无法二次展开的问题。
astro 默认对组件内脚本进行作用域隔离，导致页面跳转后事件监听丢失；通过 is:global 指令将导航栏交互逻辑提升为全局脚本，即可修复移动端菜单无法二次展开的问题。
在 Astro 中，组件（如
根本原因在于：Astro 将组件脚本默认编译为模块级作用域代码，不保证跨路由持久化执行。因此，修复关键在于确保导航交互逻辑在每次页面加载（包括客户端导航）后均有效。
✅ 正确做法：使用 is:global 提升脚本作用域
将
<script is:global>
document.addEventListener("DOMContentLoaded", () => {
const icon = document.querySelector("ion-icon");
if (!icon) return;
icon.addEventListener("click", () => {
const ul = document.querySelector("nav ul");
if (!ul) return;
if (icon.getAttribute("name") === "menu") {
icon.setAttribute("name", "close");
ul.classList.add("top-[80px]", "opacity-100", "z-10");
} else {
icon.setAttribute("name", "menu");
ul.classList.remove("top-[80px]", "opacity-100", "z-10");
}
});
});
</script>
? 为什么 is:global 有效？
is:global 告诉 Astro：此脚本应作为全局 <script> 注入 HTML <head>，绕过组件作用域限制，在每次页面（含客户端导航）加载时均重新执行，从而确保事件监听器始终可用。</script>
⚠️ 注意事项与增强建议
- DOM 查询健壮性：务必添加 if (!icon) 和 if (!ul) 判断，避免在无匹配元素时抛错（例如 Header 未渲染或结构变更）。
- 避免重复绑定：DOMContentLoaded 在单页导航中可能多次触发，但 addEventListener 本身是幂等的；若需极致安全，可先 removeEventListener 再添加，或使用 once: true（但此处需持续响应，故不适用）。
- 更优实践（进阶）：将该逻辑抽离为独立的 navbar.js，通过 <script src="/js/navbar.js" is:global> 引入，便于维护与复用。</script>
- CSS 类名一致性：确认 top-[80px] 在 Tailwind 配置中已启用（默认支持），否则需在 tailwind.config.js 中扩展 theme.spacing 或改用 top-20 等内置值。
✅ 最终效果
启用 is:global 后，无论用户从首页、定价页还是关于我们页进入，点击移动菜单图标均可正确切换 menu/close 图标，并精准控制
- 的显示/隐藏状态，彻底解决“首次有效、后续失灵”的问题。
此方案简洁、兼容性强，是 Astro 生态中处理跨路由交互逻辑的标准实践。
