Astro 组件中的不良行为

Answer 1

基本上，Astro 会在 Header 组件中编译你的 JS 代码

一旦你移动到另一个页面，它就会失去它的位置

因此将指令传递给脚本以确保它是：全局

将使您的代码全局可用，这将解决问题

这是一个有点肮脏的解决方案，但是是的，你可以做其他事情，比如将此脚本附加到主布局，我们的但所有脚本都在一个文件中，但它在标题中

<script is:global>
    document.addEventListener("DOMContentLoaded", function () {
        let icon = document.querySelector("ion-icon")!;

        icon.addEventListener("click", function () {
            if (icon.getAttribute("name") === "menu") {
                icon.setAttribute("name", "close");
                document.querySelector("ul")!.classList.add("top-[80px]");
                document.querySelector("ul")!.classList.add("opacity-100");
                document.querySelector("ul")!.classList.add("z-10");
            } else {
                icon.setAttribute("name", "menu");
                document.querySelector("ul")!.classList.remove("top-[80px]");
                document.querySelector("ul")!.classList.remove("opacity-100");
            }
        });
    });
</script>