在 Blazor 中发生 onclick 的元素定位

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;
}

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

<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" : "";
}
}

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