点击链接关闭移动端菜单及返回页面保持关闭功能咨询

功能实现说明 #

你需要的两个菜单功能确实需要使用JavaScript实现，核心解决两个场景的异常问题：

• 浏览器前进后退操作会保留复选框的选中状态，导致跳转回原页面时菜单仍保持开启
• 点击菜单内的导航链接没有触发菜单关闭的关联逻辑

具体修改方法 #

你只需要把原有代码中的<script>标签部分完整替换为以下代码即可：

document.getElementById('frmSearch').onsubmit = function() {
    window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
    return false;
}

const menuToggle = document.getElementById('cp_toggle03');
// 菜单状态变更时控制页面滚动
menuToggle.onchange = function() {
    document.body.style.overflow = menuToggle.checked ? "hidden" : "";
}

// 1. 页面加载/从其他页面跳转回来时，强制关闭菜单
window.addEventListener('load', function() {
    menuToggle.checked = false;
    document.body.style.overflow = "";
})

// 2. 点击菜单内链接时自动关闭菜单
const menuLinks = document.querySelectorAll('.cp_offcm03 nav a');
menuLinks.forEach(link => {
    link.addEventListener('click', function() {
        menuToggle.checked = false;
        document.body.style.overflow = "";
    })
})

生效说明 #

修改完成后即可实现你需要的效果：

• 任何场景下加载当前页面，菜单都会默认处于关闭状态，不会出现跳转返回后仍开启的异常
• 点击菜单内的任意导航链接，菜单会自动关闭后再执行页面跳转
• 原有菜单的点击展开、滚动锁定等交互逻辑完全不受影响

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