2

我有一小部分用于显示和隐藏 div 的 javascript。

function hidefooter(){
var button = document.getElementById('footerbutton');

button.onclick = function() {
    var div = document.getElementById('footerbox');
    if (div.style.display !== 'block') {
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
};
}

div 开始 {display:none;}。我在网上环顾四周，只能发现有人说这是一个 html 的东西。我的问题是，当我第一次写它时，“块”和“无”值被切换了，需要 3 次点击才能工作。任何帮助都会很棒。

更新：更好的解释。此代码完全符合我的要求，但您必须单击两次才能使效果生效。起初，我切换了“阻止”和“无”属性，单击 3 次才使其工作。页脚从 {display:none;} 开始。我把它放在网上，让朋友看看。网址是http://www.miettegoesplaces.com。单击右侧的紫色脚按钮。

更新2：排序问题是我两次调用onClick。这是简化的工作版本。

function hideFooter(){

var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
    div.style.display = 'block';
}
else {
    div.style.display = 'none';
}
};

感谢大家的意见和建议。

4

4 回答 4

1

您需要在页脚样式中添加“显示：无”

于 2013-08-30T10:17:47.150 回答
1

您可以window.getComputedStyle(elem)用于 Firefox、Opera、Safari 和 Chrome 或elem.currentStyleIE

var button = document.getElementById('footerbutton');

button.onclick = function() {
    var div = document.getElementById('footerbox');
    var style = window.getComputedStyle(div);
    if (style.display !== 'block') {
        div.style.display = 'block';
    }
    else {
        div.style.display = 'none';
    }
};
于 2013-08-30T10:30:06.360 回答
1

您在这里添加了两次点击事件。

  • 首先，您onClick在按钮上调用事件。
  • 在hidefooter()函数内部，您已定义button.onclick = function() {...}

像这样删除button.onclick = function() {}和使用：

函数隐藏页脚（）{

var button = document.getElementById('footerbutton');
var div = document.getElementById('footerbox');

if (div.style.display != 'block') {
    div.style.display = 'block';
}
else {
    div.style.display = 'none';
}

这是工作小提琴。

于 2013-08-30T11:02:23.717 回答
-1

只需删除用于定义处理事件的按钮的代码，然后将 onClick() 事件添加到您的按钮即可 此代码将按您的意愿工作

function hidefooter(){

var div = document.getElementById('footerbox');
if (div.style.display !== 'block') {
    div.style.display = 'block';
}
else {
    div.style.display = 'none';
}

}

但请确保您的按钮代码如下所示：

<button id="footerbutton" onClick="hidefooter()">Hide Footer</button>

注意 onClick="hidefooter()"

并确保你的 div 仍然display:none;

我相信问题在于您正在使用“隐藏”按钮来定义它的作用，然后进行隐藏工作。您应该添加一个调用 hidefooter() 函数的事件处理程序，而不是只有页脚隐藏代码。

于 2013-08-30T10:50:12.417 回答