Blazor 顶部水平导航栏带有可折叠子菜单

Question

我正在 Blazor 中使用导航栏，该导航栏沿着页面顶部而不是标准位置水平运行。

我需要为菜单选项之一添加可折叠子菜单。我尝试使用与垂直侧边栏相同的代码，但它不起作用（我已经看到它在标准导航栏上工作）。它只是水平添加了两个新的菜单选项。

这是我尝试的可折叠菜单选项的代码：

    <div class="collapse navbar-collapse @NavBarCssClass" id="navbarCollapse" @onclick="ToggleNavMenu">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item">
                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            <li class="nav-item">
                <NavLink class="nav-link" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                </NavLink>
            </li>
        </ul>
    </div>

诚然，使用标准方向会使这更容易，但我没有这个选项。我可以做些什么来在 Blazor 中顶部运行的导航栏上制作可折叠的子菜单吗？

Answer 1

AGeist我创建了一个示例希望它对您有帮助。下面是参考链接

https://blazorfiddle.com/s/iu8fn5wp