如何用HTML和JS实现两个页面折叠菜单的跨页联动

问题原因 #

1. 浏览器后退缓存（bfcache）：通过反向链接或返回按钮跳转时，浏览器会从缓存加载页面，此时window.onload事件不会触发，导致处理查询参数的代码无法执行。
2. 模拟点击的toggle逻辑：用click()模拟用户点击会触发菜单开关切换，若页面从缓存加载时菜单已处于打开状态，点击会导致菜单关闭，不符合预期。

解决方案 #

1. 替换事件监听：兼容缓存加载场景 #

将原window.onload改为监听pageshow事件，该事件在页面首次加载或从缓存加载时都会触发，确保查询参数处理逻辑始终执行。

2. 手动展开菜单，避免toggle冲突 #

直接为目标菜单添加is-open类并设置内容区域的maxHeight，而非模拟点击，确保菜单始终处于展开状态。

修改后的代码 #

共用中的脚本（替换原window.onload代码）

<head>
    <script>
        function handleSectionFromQuery() {
            const urlParams = new URLSearchParams(window.location.search);
            const section = urlParams.get('section');
            if (!section) return;

            const accordionBtn = document.getElementById(section);
            if (!accordionBtn) return;

            // 仅当菜单未展开时执行展开操作
            if (!accordionBtn.classList.contains('is-open')) {
                accordionBtn.classList.add('is-open');
                const content = accordionBtn.nextElementSibling;
                content.style.maxHeight = content.scrollHeight + "px";
            }

            // 平滑滚动到目标菜单
            accordionBtn.scrollIntoView({ behavior: "smooth" });
        }

        // 监听页面加载和缓存加载事件
        window.addEventListener('load', handleSectionFromQuery);
        window.addEventListener('pageshow', handleSectionFromQuery);
    </script>
</head>

原折叠菜单脚本（无需修改）

两个页面中的折叠菜单点击逻辑保持不变，确保手动点击菜单仍能正常开关。

额外优化建议 #

• 提取公共脚本：将折叠菜单的初始化代码单独存为JS文件，在两个页面中引用，减少代码冗余。
• 统一ID命名：可将页面1的菜单ID改为section-a、section-b，页面2的改为section-1、section-2，对应链接使用alternate.html?section=section-1，避免ID混淆，提升代码可读性。

内容的提问来源于stack exchange，提问作者Sky's Probably Confused