Blazor中JS仅首次渲染生效：折叠导航菜单功能异常求助

问题1：小屏幕默认展开，初始化自动触发toggleMenu #

原因 #

• JS初始化逻辑错误，页面加载时自动调用了toggleMenu函数
• CSS未设置小屏幕下菜单默认折叠状态，或组件默认给菜单容器加了toggle-on类

修复步骤 #

1. 修正JS初始化代码
   打开NavMenu.js，删除自动调用toggleMenu的代码，只保留函数定义：

// 仅保留函数，不要在DOM加载时自动执行
window.toggleMenu = function() {
    const navBar = document.getElementById('mainNavBar');
    navBar.classList.toggle('toggle-on');
};

2. 设置CSS默认折叠样式
   在对应CSS文件中，确保小屏幕下菜单默认折叠：

@media (max-width: 767.98px) {
    #mainNavBar {
        height: 0;
        overflow: hidden;
        transition: height 0.3s ease;
    }
    #mainNavBar.toggle-on {
        height: auto;
    }
}

同时检查NavMenu.razor中，菜单容器默认不要带toggle-on类：

<div id="mainNavBar" class="main-nav-bar">
    <!-- 菜单内容 -->
</div>

问题2：页面切换后按钮点击无响应 #

原因 #

Blazor路由切换时，NavMenu组件会重新渲染，纯JS绑定的点击事件会因DOM元素重建而失效。

修复步骤 #

推荐用Blazor内置事件绑定替代纯JS绑定，确保组件重新渲染后事件仍有效：

1. 修改NavMenu.razor绑定点击事件

@inject IJSRuntime JSRuntime

<button id="toggleBtn" @onclick="ToggleMenu">菜单切换</button>

<div id="mainNavBar" class="main-nav-bar">
    <NavLink href="/" Match="NavLinkMatch.All">首页</NavLink>
    <NavLink href="/counter">计数器</NavLink>
    <!-- 其他导航链接 -->
</div>

@code {
    private async Task ToggleMenu()
    {
        await JSRuntime.InvokeVoidAsync("toggleMenu");
    }
}

2. 备选：JS事件委托方案
   如果坚持用纯JS，通过事件委托绑定到父元素，避免DOM重建导致事件失效：

document.addEventListener('click', function(e) {
    if (e.target.id === 'toggleBtn') {
        const navBar = document.getElementById('mainNavBar');
        navBar.classList.toggle('toggle-on');
    }
});

验证要点 #

• 小屏幕加载时，菜单默认折叠，点击按钮可正常切换状态
• 切换页面后，菜单按钮仍能触发展开/折叠操作

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