您好我有以下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>
这是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>
出于某种原因,show函数应该如何工作,但关闭按钮不起作用。所以,如果有人可以帮助我,我真的很感激。非常感谢。
答案 0 :(得分:21)
<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>
答案 1 :(得分:5)
我通常使用类来执行此操作,这似乎迫使浏览器重新评估所有样式。
.hiddendiv {display:none;}
.visiblediv {display:block;}
然后使用;
<script>
function show() {
document.getElementById('benefits').className='visiblediv';
}
function close() {
document.getElementById('benefits').className='hiddendiv';
}
</script>
请注意“className”的大写让我感到非常沮丧
答案 2 :(得分:4)
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();
});
});
或者,您可以使用1个按钮切换显示,如下所示:
$(function()
{
// this is the show and hide function, all in 1!
$('a[name=1]').click(function()
{
$('#benefits').toggle();
});
});
答案 3 :(得分:3)
你需要里面的链接是可点击的,这意味着它需要带有一些内容的href,而且,close()是窗口的内置函数,所以你需要更改函数的名称以避免冲突
<div id="upbutton"><a href="#" onclick="close2()">click to close</a></div>
此外,如果您想要一个真正的“按钮”而不是链接,则应使用<input type="button"/>
或<button/>
。
答案 4 :(得分:2)
检查一下:
点击这里<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>
答案 5 :(得分:2)
例如,将关闭功能重命名为“隐藏”,它将起作用。
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
答案 6 :(得分:0)
Close似乎是某种保留字(可能是指window.close)。将其更改为其他内容似乎可以解决问题。
答案 7 :(得分:0)
你可以用这样的东西压缩这两个[像jQuery那样]:
function toggleMyDiv() {
if (document.getElementById("myDiv").style.display=="block"){
document.getElementById("myDiv").style.display="none"
}
else{
document.getElementById("myDiv").style.display="block";
}
}
..并在两个按钮中使用相同的功能 - 或者通常在两个功能的页面中使用。