blazor隐藏当前div并显示新div



我试图单击@onclick="@Toggle"并隐藏当前div,然后显示新的div,但它对我不起作用

这是问题

#我当前的div没有隐藏,新的div部分也没有显示在中

任何人都知道的解决方案

感谢

此处的代码

<div class="sh-agreement-tp" style="background-color: #fff; padding: 20px;">

@*  AgreementTemplate section one *@
<Row Gutter="(24, 24)">
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6"><a  @onclick="@Toggle" >
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry One</p></div>
</Body>
</Card>
</a>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry  Two</p></div>
</Body>
</Card>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Three</p></div>
</Body>
</Card>
</Col>
<Col Xs="24" Sm="24" Md="24" Lg="6" Xl="6">
<Card class="sh-agreement-tm" Bordered="false">
<Body>
<div style="text-align:center"> <p style="margin-bottom: 0rem;">Industry Four</p></div>
</Body>
</Card>
</Col>
</Row>





<div><p hidden="@(!HideLabel)">New section here </p></div>

</div>
@*  END of AgreementTemplate section one *@
@code {
private bool HideLabel   {get;set;} = false;
private void Toggle()
{
HideLabel =   !HideLabel;
}      
}

此代码运行良好:

<div hidden="@showPanel2">Panel 1</div>
<div hidden="@(!showPanel2)">Panel 2</div>
<button class="btn btn-primary" @onclick="Toggle">Click me</button>
@code
{
bool showPanel2 = false;
void Toggle() { showPanel2 = !showPanel2; }
}

所以我怀疑你的Toggle((永远不会被调用
试着调试它。

你做这件事的方式不对,你可以隐藏任何类似的div或段落

隐藏div

<div style="visibility: @(HideLabel ? "hidden" : "visible")"><p>New section here </p></div>

隐藏段落

<div><p style="visibility: @(HideLabel ? "hidden" : "visible")">New section here </p></div>

相关内容

  • 没有找到相关文章

最新更新