如何在 Blazor 中制作下拉菜单

Question

我想在我的 Blazor 应用程序中制作一个简单的下拉菜单。在我的Header.razor中声明如下：

    <div class="header-sign">
        <div class="dropdown" id="toggleDropdown">
            <button class="button-md" type="button">
                <i data-feather="user"></i>
                <span>Personal cab</span>
            </button>
            <ul class="dropdown-list">
                <li class="dropdown-item">
                    <a class="dropdown-link" href="">
                        <p class="text-md">Cabinet</p>
                    </a>
                </li>
                <li class="dropdown-item">
                    <a class="dropdown-link" href="">
                        <p class="text-md">Sign out</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

下拉菜单可以通过 JS 脚本触发，如下所示：

$("#toggleDropdown").on("mouseenter", () => {
$(this).find(".dropdown-list").addClass("is-active");
});

我在 MainLayout.razor 中声明了我的 header，如下所示：

@inherits LayoutComponentBase

<Header></Header>

<main class="main">
    @Body
</main>

<Footer></Footer>

而且这种方法行不通。

如果我将 above-mentioned Header.razor 替换为具有完全相同标记的剃刀页面 Header.cshtml 并以这种方式在 _Layout.cshtml 中呈现它，一切都会改变：

@await Html.PartialAsync("Header")

看起来上面的标记只能在 *.cshtml 文件中工作，但不能在 *.razor 中工作，我不太明白原因。为什么会这样？

Answer 1

非常感谢 Mohammed Alwedaei，我找到了解决问题的方法。他说下拉菜单应该在点击而不是悬停时激活，这对我来说真的解决了这个问题。

我们应该保持下拉列表的状态并以一种有点棘手的方式切换它的类（使用三元运算符 @(isActive ? "is-active" : "")）。为了使下拉列表按预期工作，我们应该定义 @onclick 属性以及 @onblur 以在用户单击其他地方时禁用它。

下面的代码工作得很好：

<div class="header-sign">
    <div class="dropdown" id="toggleDropdown">
        <button @onclick="Show" @onblur="Hide" class="button-md" type="button">
            <i data-feather="user"></i>
            <span>Personal cab</span>
        </button>
        <ul class="dropdown-list @(isActive ? "is-active" : "")">
            <li class="dropdown-item">
                <a class="dropdown-link" href="/cabinet">
                    <p class="text-md">Cabinet</p>
                </a>
            </li>
            <li class="dropdown-item">
                <a @onclick="LogOutAsync" class="dropdown-link" href="">
                    <p class="text-md">LogOut</p>
                </a>
            </li>
        </ul>
    </div>
</div>

@code {
    private bool isActive = false;

    private void Show()
    {
        isActive = true;
    }

    private void Hide()
    {
        isActive = false;
    }

    private async Task LogOutAsync()
    {
        
    }
}

如何在 Blazor 中制作下拉菜单

How to make a dropdown menu in Blazor

c#

asp.net-core

blazor

blazor-server-side