Как закрыть ранее открытое раскрывающееся меню в навигационном меню MudBlazor с помощью JavaScript? ⇐ C#

[Anonymous]

Я использую MudBlazor для своего меню навигации, и мне нужно реализовать функцию, при которой открытие одного раскрывающегося списка автоматически закрывает все ранее открытые раскрывающиеся списки. Решение должно быть реализовано исключительно с использованием JavaScript и HTML. Ниже мой текущий код:

Код: Выделить всё

@foreach (var item in BuildNavMenu())
{
if (item.Children.Any())
{

@foreach (var child in item.Children)
{
@child.Title
}

}
else
{
@item.Title
}
}


@code {
public class NavItem
{
public string Title { get; set; }
public string Href { get; set; }
public string Icon { get; set; }
public Color IconColor { get; set; }
public List Children { get; set; } = new List();
}

private List BuildNavMenu()
{
return new List
{
new NavItem
{
Title = "Home",
Href = "/",
Icon = Icons.Material.TwoTone.Home,
IconColor = Color.Inherit
},
new NavItem
{
Title = "Reports",
Icon = Icons.Material.TwoTone.Description,
IconColor = Color.Secondary,
Children = new List
{
new NavItem { Title = "Sales", Href = "/reports/sales", Icon = Icons.Material.TwoTone.TrendingUp, IconColor = Color.Secondary },
new NavItem { Title = "Expenses", Href = "/reports/expenses", Icon = Icons.Material.TwoTone.MoneyOff, IconColor = Color.Secondary }
}
},
new NavItem
{
Title = "Settings",
Icon = Icons.Material.TwoTone.Settings,
IconColor = Color.Info,
Children = new List
{
new NavItem { Title = "Profile", Href = "/settings/profile", Icon = Icons.Material.TwoTone.Person, IconColor = Color.Info },
new NavItem { Title = "Security", Href = "/settings/security", Icon = Icons.Material.TwoTone.Security, IconColor = Color.Info }
}
}
};
}
}


document.addEventListener('DOMContentLoaded', function () {
const navGroups = document.querySelectorAll('.mud-nav-group');
navGroups.forEach(group => {
group.addEventListener('click', function () {
navGroups.forEach(g => {
if (g !== group) {
g.classList.remove('mud-expand-icon');
}
});
});
});
});

Кроме того, есть ли какой-либо способ реализовать эту функциональность в компонентах MudNavBar и MudNavGroup изначально в MudBlazor? Я пробовал добавить прослушиватели событий для управления раскрывающимися списками, но это не работает должным образом. Будем очень признательны за любые предложения и решения!
Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/786 ... javascript