C# Blazor引导--单击外部元素时下拉列表不会关闭

在我的Blazor服务器应用程序中，我无法使默认引导下拉行为正常工作：当我单击菜单div之外的任何位置时，我需要使下拉菜单消失

我尝试了

@onfocusout

，但是如果我在其中一个表单输入中单击，然后再次单击菜单div，那么菜单div就会消失。我希望它在这个用例中保持不变。我只想在单击除下拉按钮或其菜单和相应菜单内容以外的任何位置时，使下拉菜单消失

下面是我的代码——我删除了一些表单元素，以便于浏览

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle data-toggle="dropdown" type="button"
            id="userLoginMenuButton" @onclick="(() => this.showUserMenu=!this.showUserMenu)">
        <span>Click me!</span>
    </button>
    <div class="userLoginMenu dropdown-menu dropdown-menu-right @(showUserMenu? "show":"")" 
             @onfocusout="() => this.showUserMenu = false" aria-labelledby="userLoginMenuButton">

        <form class="px-4 py-3">
            <div class="form-group">
                <label for="exampleDropdownFormEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <AuthorizeView>
            <Authorized Context="Auth">
                <a class="dropdown-item" href="" @onclick="(() => Logout())">Logout</a>
            </Authorized>
            <NotAuthorized>
                <a class="dropdown-item" href="" @onclick="(() => Login())">Login</a>
            </NotAuthorized>
        </AuthorizeView>
    </div>
</div>
 
@code{

    private bool showUserMenu = false;

    public async Task Logout()
    {
        await ((CustomAuthenticationStateProvider)AuthenticationStateProvider).MarkUserAsLoggedOut();
        NavigationManager.NavigateTo("");
    }

    private void Login()
    {
        NavigationManager.NavigateTo("/");
    }
}

这个.showUserMenu=！此.showUserMenu）“>
点击我！
电子邮件地址
登录
@代码{
private bool showUserMenu=false；
公共异步任务注销（）
{
等待（（CustomAuthenticationStateProvider）AuthenticationStateProvider）.MarkUserAsLoggedOut（）；
NavigationManager.NavigateTo（“”）；
}
私有void登录（）
{
NavigationManager.NavigateTo（“/”）；
}
}

您是否尝试在下拉div中使用

下拉切换

？将显示具有该属性的下拉菜单：

 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

下拉按钮

尝试切换您的下拉div以包括

下拉切换

。您不应该使用黑客解决方法来实现您要做的事情。另外，确保您也安装了

Popper.js

---

编辑：忽略了按钮上的

下拉切换

。您还缺少

aria haspopup=“true”aria expanded=“false”

。尝试添加该属性。

是否尝试在下拉div中使用

下拉切换

？显示具有该属性的下拉菜单：

 <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

下拉按钮

尝试切换您的下拉div以包括

下拉切换

。您不应该使用黑客解决方法来实现您要做的事情。另外，确保您也安装了

Popper.js

---

编辑：忽略按钮上的

下拉切换开关。您也缺少
aria hasppop=“true”aria expanded=“false”
。尝试添加该按钮。
您必须将事件
@onfocusout
添加到下拉按钮，此事件将触发一个方法，我们将其命名为
OutFocus

因为它在下拉项Click事件之前触发，所以我们添加了一个延迟

关于组件：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" 
        @onclick="e => this.show = !this.show" 
        @onfocusout="OutFocus">
        DropDownText
    </button>
    <div class="dropdown-menu pre-scrollable @(show? "show":"")" >
        <button class="dropdown-item" type="button" >
            Item1
        </button>
        <button class="dropdown-item" type="button" >
            Item2
        </button>
        <button class="dropdown-item" type="button" >
            Item3
        </button>
    </div>
</div>

您必须将事件
@onfocusout
添加到下拉按钮，此事件将触发一个方法，我们将其命名为
OutFocus

因为它在下拉项Click事件之前触发，所以我们添加了一个延迟

关于组件：

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" 
        @onclick="e => this.show = !this.show" 
        @onfocusout="OutFocus">
        DropDownText
    </button>
    <div class="dropdown-menu pre-scrollable @(show? "show":"")" >
        <button class="dropdown-item" type="button" >
            Item1
        </button>
        <button class="dropdown-item" type="button" >
            Item2
        </button>
        <button class="dropdown-item" type="button" >
            Item3
        </button>
    </div>
</div>

我的实际代码中已经有了
aria haspopup=“true”aria expanded=“false”
，但这并不影响结果。没有C#的解决方案可能是可行的。但我无法在Blazor应用程序中实现这一点。我已经有了
aria haspopup=“true”aria expanded=“false”“
在我的实际代码中，但这并不影响结果。一个没有C#的解决方案可能是可行的。但是我无法在Blazor应用程序中实现这一点。请注意：只需使用
@onclick=“Login”
，特别是对于async eventhandlers。请记住这一点。thanksIt在您第一次单击弹出分区时起作用。只有这样，它才能失去焦点。对不起，我没有遵循您的逻辑。您是否有更好的方法的建议？使用您当前的代码：在电子邮件框中单击，然后在菜单外单击。逻辑是明确的，但修复方法超出了我的引导知识范围。旁注：只需使用
@onclick=“Login”
，尤其是异步eventhandlers。请记住，这很酷。thanksIt在您第一次单击弹出分区时起作用。只有这样，它才能失去焦点。对不起，我没有遵循您的逻辑。您是否有更好的方法的建议？使用您当前的代码：在电子邮件框中单击，然后在菜单外单击。逻辑很清楚，但修复方法超出了我的引导知识范围。这个解决方案足够有效，@onmouseout也是一个可能的解决方案。这个解决方案足够有效，@onmouseout也是一个可能的解决方案。