技术问询：侧边栏子菜单刷新不关闭且滚动位置保持不变

需求说明 #

• 侧边栏子菜单页面刷新后必须保持展开，不允许隐藏/关闭
• 侧边栏滚动位置在页面刷新后维持原有状态

1. 强制子菜单始终展开并禁止关闭 #

调整HTML结构和JS逻辑，移除所有允许子菜单关闭的交互，确保默认展开且无法切换：

调整后的核心HTML代码

<div class="side-bar" id="sidebar">
    <img style="width:150px; height: 100px; margin-left:20px;" src="~/Images/background3.png" />
    <div class="border-top my-1"></div>
    <div class="menu">
        <div class="item">
            <!-- 固定aria-expanded为true，移除关闭交互触发 -->
            <a class="sub-btn" id="home" aria-expanded="true">
                <i class="fas fa-cogs"></i>Settings
                <!-- 改用向下箭头，固定展开样式 -->
                <i class="fas fa-angle-down dropdown"></i>
            </a>
            <!-- 默认添加show类确保展开状态 -->
            <div class="sub-menu show" id="home-collapse">
                <!-- 子项内容保持不变 -->
            </div>
        </div>
        <div class="item">
            <a class="sub-btn" id="assets" aria-expanded="true">
                <i class="fas fa-th-list"></i>Assets
                <i class="fas fa-angle-down dropdown"></i>
            </a>
            <div class="sub-menu show" id="Assets-collapse">
                <!-- 子项内容保持不变 -->
            </div>
        </div>
    </div>
</div>

调整后的核心JS代码

$(document).ready(function () {
    // 移除所有子菜单关闭逻辑，仅保留菜单切换时的显示逻辑
    $('#home').click(function () {
        $('#Assets-collapse').show();
        $('#home-collapse').show();
    });
    $('#assets').click(function () {
        $('#Assets-collapse').show();
        $('#home-collapse').show();
    });
});

2. 持久化侧边栏滚动位置 #

利用localStorage保存滚动位置，页面加载时自动恢复：

$(document).ready(function () {
    // 页面加载时恢复滚动位置
    const savedScrollPos = localStorage.getItem('sidebarScrollPos');
    if (savedScrollPos) {
        $('#sidebar').scrollTop(parseInt(savedScrollPos));
    }

    // 实时监听滚动事件，保存位置
    $('#sidebar').on('scroll', function() {
        localStorage.setItem('sidebarScrollPos', $(this).scrollTop());
    });

    // 页面刷新/关闭前再次保存，确保状态不丢失
    $(window).on('beforeunload', function() {
        localStorage.setItem('sidebarScrollPos', $('#sidebar').scrollTop());
    });
});

完整整合后的JS代码 #

$(document).ready(function () {
    // 强制子菜单始终展开，禁止关闭
    $('#home').click(function () {
        $('#Assets-collapse').show();
        $('#home-collapse').show();
    });
    $('#assets').click(function () {
        $('#Assets-collapse').show();
        $('#home-collapse').show();
    });

    // 侧边栏滚动位置持久化
    const savedScrollPos = localStorage.getItem('sidebarScrollPos');
    if (savedScrollPos) {
        $('#sidebar').scrollTop(parseInt(savedScrollPos));
    }

    $('#sidebar').on('scroll', function() {
        localStorage.setItem('sidebarScrollPos', $(this).scrollTop());
    });

    $(window).on('beforeunload', function() {
        localStorage.setItem('sidebarScrollPos', $('#sidebar').scrollTop());
    });
});

关键说明 #

• 子菜单通过默认添加show类确保初始展开，同时移除所有slideToggle()、hide()等关闭逻辑，彻底禁止用户隐藏子菜单
• 滚动位置通过localStorage实时保存，页面加载时读取并恢复，刷新后位置完全不变
• 删除原代码中Bootstrap collapse相关的状态存储逻辑，因为需求要求子菜单始终展开，无需切换状态

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