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 中声明了我的MainLayout.razor ，如下所示：

@inherits LayoutComponentBase

<Header></Header>

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

<Footer></Footer>

而且这种方法行不通。

如果我用完全相同的标记将上面提到的Header.razor替换为 razor 页面Header.cshtml并以这种方式在_Layout.cshtml中呈现它，一切都会改变：

@await Html.PartialAsync("Header")

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

Answer 1

非常感谢 Mohammed Alwedaei，我想出了如何解决我的问题。 他说下拉菜单应该在点击时激活，而不是在 hover 上，这真的解决了我的问题。

我们应该只保留下拉列表的 state 并以一种有点棘手的方式切换它的类（使用三元运算符@(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()
    {
        
    }
}