单页应用程序中的 Bootstrap 4 卡答案

【问题标题】：Bootstrap 4 card within a single page application单页应用程序中的 Bootstrap 4 卡
【发布时间】：2021-08-19 19:08:45
【问题描述】：

我有一个 Blazor 服务器端单页应用程序。在其中一个组件中，我有一个简单的 bootstrap 4 可折叠面板：

                    <a href="#demo" data-toggle="collapse">Collapsible</a>

                    <div id="demo" class="collapse">
                        Lorem ipsum dolor text....
                    </div>

当用户点击链接时，不是折叠（或打开）面板，而是刷新整个应用程序，因为来自 https://localhost:44333/mycurrentcomponent 的 url 变为 https://localhost:44333/#demo .

如何让折叠面板正常工作？

【问题讨论】：

标签： bootstrap-4 blazor-server-side collapse

【解决方案1】：

我会跳过 Bootstrap 机制，其中可能包含未设置为在 Blazor 中使用的 Javascript。

在 Blazor 中做这种事情是微不足道的：

<a @onclick="()=> IsCollapsed = !IsCollapsed" style="text-decoration:underline;color:navy;cursor:pointer">Collapsible</a>

@if (!IsCollapsed)
{
    <div id="demo">
        Lorem ipsum dolor text....
    </div>
}

@code {
    bool IsCollapsed;
}

【讨论】：

谢谢，好主意。