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

【问题标题】：How to Collapse a DIV in Blazor without any NuGet Package如何在没有任何 NuGet 包的情况下在 Blazor 中折叠 DIV
【发布时间】：2023-04-07 04:25:01
【问题描述】：

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

【问题讨论】：

你已经尝试过什么？你能告诉我们你到目前为止的进展吗？请阅读stackoverflow.com/help/how-to-ask 并编辑您的问题。以这种方式提出的问题很可能会被关闭。

标签： blazor blazor-server-side blazor-client-side blazor-webassembly asp.net-blazor

【解决方案1】：

您不需要任何 blazor/c# 代码来启动引导折叠工作，这一切都是通过 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; }
}

【讨论】：