显示/隐藏开关答案

【问题标题】：show/hide switch显示/隐藏开关
【发布时间】：2013-04-15 02:56:07
【问题描述】：

我有以下代码

<input type='radio' name='showhide'></input><input type='radio' name='showhide'></input>
<br/>
<label> Some tips here!</label>

我的要求是，当单选按钮改变时，下面的标签将被显示或隐藏。很容易实现，但我的问题是，随着标签的显示或隐藏，整个页面的布局会发生变化。我认为这是因为标签中的文本比单选按钮长。那我应该怎么做才能防止页面布局的变化呢？提前致谢！

【问题讨论】：

使用css可见性：隐藏

标签： javascript css show-hide slidetoggle

【解决方案1】：

首先，没有</input>。另一件事是你没有给输入赋值。

<input type='radio' name='showhide' value="true" />
<input type='radio' name='showhide' value="false" />

现在，对于交互，将ID 发送给<label>。

<label id="tips"> Some tips here!</label>

使用 JavaScript，您可以做到这一点：

<input type='radio' name='showhide' onclick="document.getElementById('tips').style.visibility='visible'" value="true" />
<input type='radio' name='showhide' onclick="document.getElementById('tips').style.visibility='hidden'" value="false" />

【讨论】：

你是对的，但这只是一个例子。我的问题是整个页面的布局随着标签的显示/隐藏而改变。
是的，正如人们所说，使用visibility。检查我更新的答案。
它有效。非常感谢。我很困惑这个方法和jquery中的slideToggle函数有什么区别。

【解决方案2】：

使用 css 可见性

<input type='radio' name='showhide' onclick="document.getElementById('tip').style.visibility='visible';" />
<input type='radio' name='showhide' onclick="document.getElementById('tip').style.visibility='hidden''" value="false" />

<label id="tip"> Some tips here!</label>

【讨论】：