如何在 Blazor 中制作下拉菜单

Question

我正在尝试在 Blazor 应用程序中制作一个简单的下拉菜单。在 my 中声明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如下：

@inherits LayoutComponentBase

<Header></Header>

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

<Footer></Footer>

而这种方法行不通。

如果我用完全相同的标记替换上述的Header.razorrazor 页面并以这种方式呈现它，一切都会改变：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()
    {
        
    }
}