多级导航菜单 Balzor 服务器端应用程序

Question

在 Blazor 服务器应用程序上工作并尝试制作多级导航菜单

在共享组件 Navmenu.razor 文件下，我添加了从引导程序复制的代码

https://getbootstrap.com/docs/4.0/components/navbar/

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>

运行此更改后，菜单项似乎已添加到布局中，但下拉行为不起作用

进一步搜索并将 jquery 库添加到 _Host.cshtml 后，如下所示的 head 部分

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>

菜单设法显示下拉菜单的行为

是否建议在 blazor 中使用 jquery，但颜色或样式似乎被覆盖，如图所示

在 Blazor 中制作多级导航菜单真的不容易吗？

Answer 1

你的问题的答案是你应该用它制作一个组件。

例如，

首先创建一个带有布尔值和字符串的组件。

然后创建一个元素并赋予它@onclick 属性。当用户点击元素时，它会触发 onclick 事件，并将布尔值切换为与原来相反的值。

最后，字符串属性跟踪布尔值并输出包含显示或隐藏特定元素所需样式的适当字符串。

CollapsableMenuItem.razor

<button @onclick="ToggleVisibility" class="btn btn-link" style="cursor:pointer;">Click me</button>
<br />
<span class="nav-item" style="@_style">
    I'm invisible until you click on the button
</span>

@code {
 private bool _collapsed;

 private string _style 
   => _collapsed ? "visibility:visible;" : "visibility:hidden;";

 public Task ToggleVisibility() {
   _collapsed = !_collapsed;
   return Task.CompletedTask;
 }
}

我创建了这个 .NET Fiddle 来查看它的实际效果：

https://blazorfiddle.com/s/229e32g4

Answer 2

正如 Dennis 所提到的，您可以使用它构建一个组件。 但是，如果您对 bootstrap 提供的基本功能感到满意，请继续使用它。我已经广泛使用它，没有任何问题。还有，

1. 在 Blazor 中使用 JavaScript 并没有什么坏处。很多图书馆一直在使用它。对于某些浏览器交互（页面刷新、获取视口大小等），您必须使用 JavaScript。
2. 如果您使用引导程序 5，则没有 jQuery。它是纯 JavaScript
3. 最重要的是，在 blazor 中正确制作动画很痛苦。虽然您可以在 blazor 中轻松获得核心折叠/展开功能，但动画却很棘手。

最后，您的样式很不稳定，因为与 Visual Studio 模板捆绑在一起的 nav-link 和 bootstrap 中所述的 nav-link 之间的样式存在冲突。保留您的选择之一。您将在菜单组件的 razor 文件下找到模板 css。删除或标记 !important，具体取决于您要保留的样式。