Blazor应用中菜单需两次点击才能激活的问题如何解决

问题根因 #

你当前的代码逻辑存在事件绑定时序错误，和Blazor框架无关：

• 你将ActiveTest方法绑定在了ul元素的点击事件上，首次点击菜单项时，只会先执行ActiveTest给所有<a>标签绑定点击回调，本次点击不会触发刚刚绑定的<a>点击事件
• 第二次点击菜单项时，<a>标签已经完成了事件绑定，所以能正常触发高亮逻辑

修复方案 #

1. 修改HTML代码 #

移除ul标签上的onclick="ActiveTest()"属性：

<div>
   <ul class="nav">
      <li>
         <a href="#" class="active">
         <i class="fas fa-home"></i>
         <span class="name">Home</span>
         </a>
      </li>
      <li>
         <a href="#">
         <i class="fas fa-book-reader"></i>
         <span class="name">Reader</span>
         </a>
      </li>
      ...
   </ul>
</div>

2. 调整JS绑定逻辑 #

通用JS写法

页面加载完成后直接绑定菜单点击事件即可：

$(function () {
    $(".nav li a").click(function () {
        $(".nav li a").removeClass("active");
        $(this).addClass("active");
    });
});

适配Blazor的写法

如果是Blazor项目，建议在组件的OnAfterRenderAsync生命周期中调用绑定逻辑，避免DOM未渲染完成导致绑定失效：
首先修改JS代码，增加解绑逻辑避免重复绑定：

function initNavActive() {
    $(".nav li a").off('click').on('click', function () {
        $(".nav li a").removeClass("active");
        $(this).addClass("active");
    });
}

然后在对应Blazor组件的代码中添加初始化调用：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("initNavActive");
    }
}

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