在 Blazor 中发生点击的元素目标

Question

>我有一个包含多个列表元素的HTML部分，如下所示：

<li class="c-sidebar-nav-item c-sidebar-nav-dropdown @DropdownClass" @onclick="dropMenu">
<li class="c-sidebar-nav-item c-sidebar-nav-dropdown @DropdownClass" @onclick="dropMenu">
<li class="c-sidebar-nav-item c-sidebar-nav-dropdown @DropdownClass" @onclick="dropMenu">

目标是当单击其中一个元素时，将添加一个新的类c-show，然后在下面显示子菜单。

我在 blazor 中添加的代码是：

@code{
bool MenuDroppedDown = true;
string DropdownClass => MenuDroppedDown ? "c-show" : "";

public async void dropMenu()
{
MenuDroppedDown = !MenuDroppedDown;
}
}

但这里的问题是，一旦单击一个元素，就会在任何地方添加c-show。

我怎样才能拥有它，以便只影响发生onclick事件的元素？

Answer 1

将下面的代码复制到 Index 组件中，添加这个惊人的 css 类

.c-show {
background-color: red;
}

到站点.css位于 wwwroot 文件夹中，然后运行代码

<ul>
@foreach (var item in items)
{
<li class="c-sidebar-nav-item c-sidebar-nav-dropdown @item.DropdownClass" @onclick="@(() => item.MenuDroppedDown = !item.MenuDroppedDown)" >click me</li>
}
</ul>

@code{
List<LiTag> items = Enumerable.Range(1, 10).Select(i => new LiTag { ID = i }).ToList();
public class LiTag
{
public int ID { get; set; }
public bool MenuDroppedDown { get; set; }
public string DropdownClass => MenuDroppedDown ? "c-show" : "";
}
}

请不要犹豫，提出问题，因为这段代码是不言自明的，我没有费心解释我在做什么。