如何在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中声明了我的标题，如下所示:

@inherits LayoutComponentBase
<Header></Header>
<main class="main">
@Body
</main>
<Footer></Footer>

这个方法不起作用。

如果我用完全相同的标记替换上述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()
{

}
}