如何在没有任何 NuGet 包的情况下折叠 Blazor 中的 DIV

问题描述

是否有可能在没有任何 NuGet 包的情况下在 Blazor 中显示/隐藏或折叠/切换 div？我尝试了很多解决方案，但都不能满足我的任何要求，我需要 Blazor Razor 中 Bootstrap Collapse 的确切功能。

解决方法

您不需要任何 blazor/c# 代码即可使 bootstrap 折叠工作，这一切都是通过 javascript 完成的，请在此处查看：https://blazorfiddle.com/s/culy2nbv

以下代码直接从bootstrap documentation

复制而来

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    ...
  </div>
</div>

如果您想使用 blazor/c#，请查看此解决方案，您可以在其中使用标志来显示/隐藏 div 内容： https://blazorfiddle.com/s/ulpg13ql

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" @onclick="@(() => { IsVisible = !IsVisible; })">
    Link with href
  </a>
</p>
<div class="collapse @(IsVisible ? "show" : "")">
  <div class="card card-body">
    ...
  </div>
</div>

@code {
    protected bool IsVisible { get; set; }
}