Javascript 隐藏 <span> 的 Java 脚本函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7129305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Java script function to hide a <span>?
提问by Duncan Palmer
Hi i have the following code:
嗨，我有以下代码：
<a onclick="show_login()">Login
<span id="login" style="visibility: hidden">
<form method="post" action="login.php">
<label for="username">Username:</label>
<input type="text" name="username" /></a>
<label for="password">Password:</label>
<input type="password" name="password" />
<input type="submit" name="login" value="Login" />
</form>
</span>
I want to know how to hide/show that span using the function name "show_login". How would i go about doing this?
我想知道如何使用函数名称“show_login”隐藏/显示该跨度。我该怎么做呢？
回答by mu is too short
You probably shouldn't be using a <span>for that, <div>would serve you better. And visibilityprobably isn't what you want either, visible: hidden:
您可能不应该<span>为此使用 a ，它<div>会更好地为您服务。而且visibility可能也不是您想要的，visible: hidden：
hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
hidden
生成的框是不可见的（完全透明，什么都不画），但仍然影响布局。此外，如果元素的后代具有“可见性：可见”，则它们将可见。
And you should close your <a>before the login form.
你应该<a>在登录表单之前关闭你的。
You probably want to use display: noneand display: block. So something like this:
您可能想要使用display: none和display: block。所以像这样：
<a onclick="toggle_login()">Login</a>
<div id="login" style="display: none">
<form method="post" action="login.php">
<label for="username">Username:</label>
<input type="text" name="username" /></a>
<label for="password">Password:</label>
<input type="password" name="password" />
<input type="submit" name="login" value="Login" />
</form>
</div>
And:
和：
function toggle_login() {
var div = document.getElementById('login');
div.style.display = div.style.display == 'none' ? 'block' : 'none';
return false;
}
Live example: http://jsfiddle.net/ambiguous/6ngnU/1/
回答by DefconRhall
Set the style to display: none to start with and use the jquery function show to make it appear when you want it.
将样式设置为 display: none 并使用 jquery 函数 show 使其在您需要时显示。
