显示和隐藏 div 的 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11395370/
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
javascript functions to show and hide divs
提问by bonny
Hello I have the following 2 JavaScript functions to open up a div and to close it.
您好，我有以下 2 个 JavaScript 函数来打开和关闭一个 div。
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
}
</script>
<script>
function close() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
</script>
Here is the html:
这是html：
<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
some input in here plus the close button
<div id="upbutton"><a onclick=close()></a></div>
</div>
For some reason the show function works how it should, but the close button does not do its job. So if there is someone who could help me out I really would appreciate. Thanks a lot.
出于某种原因，显示功能如何工作，但关闭按钮不起作用。因此，如果有人可以帮助我，我将不胜感激。非常感谢。
回答by WolvDev
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<div id="opener"><a href="#1" name="1" onclick="return show();">click here</a></div>
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="return hide();">click here</a></div>
</div>
回答by PaulMolloy
I usually do this with classes, that seems to force the browsers to reassess all the styling.
我通常用类来做这件事，这似乎迫使浏览器重新评估所有的样式。
.hiddendiv {display:none;}
.visiblediv {display:block;}
then use;
然后使用；
<script>
function show() {
document.getElementById('benefits').className='visiblediv';
}
function close() {
document.getElementById('benefits').className='hiddendiv';
}
</script>
Note the casing of "className" that trips me up a lot
请注意“className”的大小写让我很困惑
回答by Richard
The beauty of jQuery would allow us to do the following:
jQuery 的美让我们能够做到以下几点：
$(function()
{
var benefits = $('#benefits');
// this is the show function
$('a[name=1]').click(function()
{
benefits.show();
});
// this is the hide function
$('a', benefits).click(function()
{
benefits.hide();
});
});
Alternatively you could have 1 button toggle the display, like this:
或者，您可以使用 1 个按钮切换显示，如下所示：
$(function()
{
// this is the show and hide function, all in 1!
$('a[name=1]').click(function()
{
$('#benefits').toggle();
});
});
回答by Brett Zamir
You need the link inside to be clickable, meaning it needs a href with some content, and also, close() is a built-in function of window, so you need to change the name of the function to avoid a conflict.
你需要里面的链接是可点击的，这意味着它需要一个带有一些内容的href，而且close()是window的内置函数，因此你需要更改函数的名称以避免冲突。
<div id="upbutton"><a href="#" onclick="close2()">click to close</a></div>
Also if you want a real "button" instead of a link, you should use <input type="button"/>or <button/>.
此外，如果您想要一个真正的“按钮”而不是链接，则应使用<input type="button"/>或<button/>。
回答by ksladkov
Rename the closing function as 'hide', for example and it will work.
例如，将关闭功能重命名为“隐藏”，它将起作用。
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
回答by Mark Drabant
check this:
检查这个：
点击这里<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="close(); return false;"></a></div>
</div>
回答by Brandon Boone
Close appears to be a reserved word of some sort (Possibly referring to window.close). Changing it to something else appears to resolve the issue.
Close 似乎是某种保留字（可能是指 window.close）。将其更改为其他内容似乎可以解决问题。
回答by AMDP
You can zip the two with something like this [like jQuery does]:
你可以用这样的东西来压缩这两个 [像 jQuery 一样]：
function toggleMyDiv() {
if (document.getElementById("myDiv").style.display=="block"){
document.getElementById("myDiv").style.display="none"
}
else{
document.getElementById("myDiv").style.display="block";
}
}
..and use the same function in the two buttons - or generally in the page for both functions.
..并在两个按钮中使用相同的功能 - 或者通常在两个功能的页面中使用。
