Question

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

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';
}
};

感谢每个人的意见和建议。

Answer 1

您需要在页脚样式中添加“display：none”

Answer 2

您可以将window.getComputedStyle(elem)用于Firefox，Opera，Safari和Chrome，或elem.currentStyle用于IE

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';
    }
};

Answer 3

您已在此处添加了两次点击事件。

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

删除button.onclick = function() {}并使用如下：

function hidefooter（）{

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

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

以下是working fiddle.

Answer 4

只需删除用于定义处理事件的按钮的代码，然后将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（）函数的事件处理程序，它只包含页脚隐藏代码。

功能需要2次点击才能显示隐藏的div

4 个答案: