Blazor Server端带复选框下拉框点击复选框自动关闭问题

这个问题是因为Bootstrap默认会监听下拉菜单内的点击事件，触发下拉框关闭逻辑。下面提供两种可行的解决办法：

方法1：阻止事件冒泡 #

直接在复选框和对应的label上添加Blazor的事件阻止指令，让点击事件不会向上传递到下拉组件，这样Bootstrap就不会触发关闭。

修改后的代码：

<div class="dropdown" style="position: absolute; top:0; right:0;">                
   <button type="button" class="btn btn-lg dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Choose Columns</button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownButton1">
      <li>
         <label @onclick:stopPropagation="true">
             <input type="checkbox" style="height:auto;" @bind="showDepartment" @onclick:stopPropagation="true"/> Department
         </label>
      </li>
      <!-- 其他复选框照此修改 -->
      <li>
         <label @onclick:stopPropagation="true">
             <input type="checkbox" style="height:auto;" @bind="showName" @onclick:stopPropagation="true"/> Name
         </label>
      </li>            
   </ul>
</div>

核心是@onclick:stopPropagation="true"这个指令，它会阻止点击事件冒泡到父级元素，避免触发Bootstrap的下拉关闭逻辑。

方法2：手动控制下拉状态 #

如果想要更灵活的控制，完全自己管理下拉框的显示和隐藏，不受Bootstrap默认行为限制。

步骤1：编写Razor组件代码 #

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<div class="dropdown" style="position: absolute; top:0; right:0;" @ref="dropdownRef">                
   <button type="button" class="btn btn-lg dropdown-toggle" @onclick="ToggleDropdown" aria-haspopup="true" aria-expanded="@isDropdownOpen">Choose Columns</button>
   <ul class="dropdown-menu @(isDropdownOpen ? "show" : "")" role="menu" aria-labelledby="dropdownButton1">
      <li>
         <label>
             <input type="checkbox" style="height:auto;" @bind="showDepartment"/> Department
         </label>
      </li>
      <!-- 其他复选框保持原样即可 -->
      <li>
         <label>
             <input type="checkbox" style="height:auto;" @bind="showName"/> Name
         </label>
      </li>            
   </ul>
</div>

@code {
    // 控制下拉框是否展开
    private bool isDropdownOpen = false;
    // 下拉框的DOM引用
    private ElementReference dropdownRef;
    // JS模块引用
    private IJSObjectReference? jsModule;

    // 点击按钮切换下拉状态
    private void ToggleDropdown()
    {
        isDropdownOpen = !isDropdownOpen;
        if (isDropdownOpen)
        {
            _ = RegisterClickOutside();
        }
    }

    // 注册点击外部关闭下拉的事件
    private async Task RegisterClickOutside()
    {
        jsModule ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/clickOutside.js");
        await jsModule.InvokeVoidAsync("registerClickOutside", dropdownRef, DotNetObjectReference.Create(this));
    }

    // JS调用关闭下拉的方法
    [JSInvokable]
    public void CloseDropdown()
    {
        isDropdownOpen = false;
        StateHasChanged();
    }

    // 释放JS资源
    public async ValueTask DisposeAsync()
    {
        if (jsModule != null)
        {
            await jsModule.DisposeAsync();
        }
    }
}

步骤2：添加JS文件 #

在项目的wwwroot/scripts目录下创建clickOutside.js，内容如下：

export function registerClickOutside(element, dotNetRef) {
    const handleClick = (event) => {
        // 判断点击是否在下拉框外部
        if (!element.contains(event.target)) {
            // 调用Blazor方法关闭下拉
            dotNetRef.invokeMethodAsync('CloseDropdown');
            // 移除事件监听
            document.removeEventListener('click', handleClick);
        }
    };
    document.addEventListener('click', handleClick);
}

这种方法完全自定义下拉的显示逻辑，点击按钮切换状态，点击外部区域自动关闭，菜单内的任何操作都不会触发关闭。

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