Ориентация на элемент, где произошел онклик в 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" : "";
}
}

Пожалуйста, не стесняйтесь задавать вопросы, так как этот код довольно понятен, я не стал объяснять, что я делал. Пожалуйста, примите мой ответ, нажав на знак ОК, и проголосуйте, если он решил вашу проблему, чтобы другие знали, что это было полезно ...