在 MudNavMenu 中一次展开一个 MudNavGroup

Question

有没有一种方法可以在 MudNavMenu 中一次展开一个 MudNavGroup。本质上，当展开一个 MudNavGroup 时，任何展开的 MudNavGroup 都应该折叠。

我希望找到一个可以设置的属性，但似乎没有。

注意：MudNavGroup 和 MudNavLink 是动态生成的。

Answer 1

这样的东西可以工作：

NavMenu.razor

<MudNavMenu>
  @foreach (var item in this.MenuItems)
  {
    if (item.SubItems == null)
    {
      <MudNavLink Href="@item.Link.Url">@item.Link.Name</MudNavLink>
    }
    else
    {
      <MudNavGroup
        @ref="@this.subMenuItems[item.Link.Name]"
        Title="@item.Link.Name"
        ExpandedChanged="@(e => this.ToggleExpanded(e, item.Link.Name))">

        @foreach (var subItem in item.SubItems)
        {
          <MudNavLink Href="@subItem.Url">@subItem.Name</MudNavLink>
        }
      </MudNavGroup>
    }
  }
</MudNavMenu>

@code{
  private Dictionary<string, MudNavGroup> subMenuItems = new();

  [Parameter]
  public List<MenuItem> MenuItems { get; set; } = new();

  public record MenuItem(Link Link, List<Link>? SubItems = null);

  public record Link(string Name, string Url = "");

  private void ToggleExpanded(bool expanded, string itemName)
  {
    if (expanded)
    {
      foreach (var entry in this.subMenuItems.Where(entry => entry.Key != itemName))
      {
        entry.Value.Expanded = false;
      }
    }
  }
}

然后使用它看起来像这样：

<NavMenu 
  MenuItems="@(new List<NavMenu.MenuItem>
  {
    new(new NavMenu.Link("Home", "/")),
    new(new NavMenu.Link("Food"), new List<NavMenu.Link> { new("Food 1", "food/1"), new("Food 2", "food/2") }),
    new(new NavMenu.Link("Drinks"), new List<NavMenu.Link> { new("Drink 1", "drink/1"), new("Drink 2", "drink/2") })
  })"/>

如果您现在展开饮料菜单，食物菜单将会折叠。

Answer 2

替代解决方案，如果您不想通过参数创建导航项：

<MudNavMenu>

  <MudNavGroup @onclick="() => NavGroupClicked(0)" @bind-Expanded=MudGroupExpended[0] >
      @*MudNavLink items*@
  </MudNavGroup>
    
  <MudNavGroup @onclick="() => NavGroupClicked(1)" @bind-Expanded=MudGroupExpended[1] >
      @*MudNavLink items*@
  </MudNavGroup>

</MudNavMenu>


@code
{
  
private bool[] MudGroupExpended = new bool[2]; // boolarray size = amount of MudNavGroupitems

    public void NavGroupClicked(int ArrayIndex)
    {

        for (int i = 0; i < MudGroupExpended.Length; i++)
        {
            if (i != ArrayIndex)
                MudGroupExpended[i] = false;
        }
    }
}

注意：显然，如果要添加更多组，则需要增加数组的大小。