Blazor Web App中Bootstrap主题菜单触发导航而非下拉的修复

问题原因 #

Blazor的客户端路由系统会自动拦截所有<a>标签的点击事件，尝试执行路由导航——哪怕你的<a>标签href是#!这类非路由路径，这就导致点击下拉菜单触发按钮时，优先触发了路由导航，而非下拉展开逻辑。

解决方法 #

方法1：添加Blazor内置的默认行为阻止

直接给下拉触发的<a>标签添加@onclick:preventDefault属性，阻止Blazor的路由导航拦截，让Bootstrap主题的下拉逻辑正常执行。

修改后的代码：

<li class="pc-item pc-hasmenu">
    <a href="#!" class="pc-link" @onclick:preventDefault>
        <span class="pc-micon"> <i class="ph-duotone ph-layout"></i></span>
        <span class="pc-mtext">Layouts</span>
        <span class="pc-arrow">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
                <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
        </span>
    </a>
    <ul class="pc-submenu" style="display: none;">
        <li class="pc-item"><a class="pc-link" href="/">Horizontal</a></li>
        <li class="pc-item"><a class="pc-link" href="/">Vertical</a></li>
        <li class="pc-item"><a class="pc-link" href="/">Vertical + Tab</a></li>
    </ul>
</li>

方法2：自定义JS初始化下拉逻辑（针对依赖JS的主题）

如果你的Bootstrap主题依赖自定义JS实现下拉展开，需要在Blazor组件渲染完成后初始化逻辑，同时确保阻止默认导航行为：

1. 在组件代码中添加初始化逻辑：

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

2. 在wwwroot下的JS文件中添加初始化函数：

function initPcDropdowns() {
    document.querySelectorAll('.pc-hasmenu .pc-link').forEach(link => {
        link.addEventListener('click', function(e) {
            // 阻止默认导航行为
            e.preventDefault();
            // 切换子菜单显示状态
            const submenu = this.nextElementSibling;
            submenu.style.display = submenu.style.display === 'none' ? 'block' : 'none';
            // 如果主题有自带的切换类，比如添加active，可在此处补充
            this.parentElement.classList.toggle('active');
        });
    });
}

注意事项 #

• 优先使用方法1，@onclick:preventDefault是Blazor官方提供的便捷方式，无需额外JS代码。
• 如果主题自带下拉交互逻辑，确保不要重复绑定点击事件，避免冲突。

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