点击链接后如何保持菜单展开状态？页面重载菜单自动收回问题求解

问题根因 #

菜单的展开状态仅保存在当前页面的运行时内存中，点击子链接触发页面重载后，所有运行时状态都会被重置，菜单自然恢复为默认收起状态。

解决方案1：URL路径匹配（更推荐） #

页面加载后自动读取当前访问的URL，判断是否属于该菜单下的子页面，如果是就主动把菜单设为展开状态，即使用户直接访问子页面链接也能正确展开对应菜单。
修改后的完整JS代码如下：

function setChecked(check_id) {
    event.preventDefault();
    let checkbox = document.getElementById(check_id);
    checkbox.checked = !checkbox.checked;
}

function showSection(check_id, section_id) {
    let checkbox = document.getElementById(check_id)
    let section = document.getElementById(section_id);
    if (checkbox.checked) {
        section.style.opacity = 1;
        section.style.display = 'block';
    } else {
        section.style.opacity = 0;
        section.style.display = 'none';
    }
}

// 新增页面加载初始化逻辑
window.addEventListener('DOMContentLoaded', function() {
    const currentUrl = window.location.href;
    // 判断当前页面是否是该菜单下的子页面
    if (currentUrl.includes('link-item1') || currentUrl.includes('link-item2')) {
        const menuCheckbox = document.getElementById('isexpanded3');
        if (menuCheckbox) {
            menuCheckbox.checked = true;
            showSection('isexpanded3', 'itens-options-list');
        }
    }
})

解决方案2：sessionStorage持久化 #

每次切换菜单状态时将展开/收起状态存在浏览器本地存储中，页面加载时读取存储的状态恢复菜单显示，仅在当前标签页生效，关闭标签页后状态自动清除。
修改后的完整JS代码如下：

function setChecked(check_id) {
    event.preventDefault();
    let checkbox = document.getElementById(check_id);
    checkbox.checked = !checkbox.checked;
    // 存储菜单状态
    sessionStorage.setItem('menu_' + check_id, checkbox.checked ? '1' : '0');
}

function showSection(check_id, section_id) {
    let checkbox = document.getElementById(check_id)
    let section = document.getElementById(section_id);
    if (checkbox.checked) {
        section.style.opacity = 1;
        section.style.display = 'block';
    } else {
        section.style.opacity = 0;
        section.style.display = 'none';
    }
}

// 新增页面加载初始化逻辑
window.addEventListener('DOMContentLoaded', function() {
    const menuCheckbox = document.getElementById('isexpanded3');
    if (menuCheckbox && sessionStorage.getItem('menu_isexpanded3') === '1') {
        menuCheckbox.checked = true;
        showSection('isexpanded3', 'itens-options-list');
    }
})

额外优化提示 #

现有代码中<a href="" onclick="setChecked('isexpanded3')">items</a>的href属性为空，点击会触发当前页面重载，建议改为href="javascript:void(0)"避免不必要的刷新。

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