Bootstrap 单页应用程序中有 4 张卡片
Bootstrap 4 card within a single page application
我有一个 Blazor 服务器端单页应用程序。在其组件之一中,我有一个简单的 bootstrap 4 可折叠面板:
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
当用户单击 link 时,不会折叠(或打开)面板,而是刷新整个应用程序,因为来自 https://localhost:44333/mycurrentcomponent 的 url 变为https://localhost:44333/#demo.
如何使可折叠面板正常工作?
我只是跳过 Bootstrap 机制,其中可能包括 Javascript,它不是为在 Blazor 中使用而设置的。
在 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;
}
我有一个 Blazor 服务器端单页应用程序。在其组件之一中,我有一个简单的 bootstrap 4 可折叠面板:
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
当用户单击 link 时,不会折叠(或打开)面板,而是刷新整个应用程序,因为来自 https://localhost:44333/mycurrentcomponent 的 url 变为https://localhost:44333/#demo.
如何使可折叠面板正常工作?
我只是跳过 Bootstrap 机制,其中可能包括 Javascript,它不是为在 Blazor 中使用而设置的。
在 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;
}