我试图单击@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>