Question

我有一个简单的输入按钮（不是提交），带有onclick功能来显示或隐藏另一个div。出于某种原因，我必须单击按钮两次，一次选择它，然后再次执行该功能。

这是简短版本：

<input type="button" id="request_info_layer_button" onclick="showForm()" value="REQUEST INFORMATION" />

function showForm() {
var isdisplayed = document.getElementById("request_info_form_layer_wrapper").style.display;
if (isdisplayed == "none") {
    document.getElementById("request_info_form_layer_wrapper").style.display = "block";
    document.getElementById("request_info_layer_button").style.borderBottom = "0";
    document.getElementById("request_info_layer_button").style.borderLeft = "0";
    document.getElementById("request_info_layer_button").style.borderTop = "solid 3px #C4591B";
    document.getElementById("request_info_layer_button").style.borderRight = "solid 4px #C4591B";
} else {
    document.getElementById("request_info_form_layer_wrapper").style.display = "none";
    document.getElementById("request_info_layer_button").style.borderTop = "0";
    document.getElementById("request_info_layer_button").style.borderRight = "0";
    document.getElementById("request_info_layer_button").style.borderLeft = "solid 3px #DFBC81";
    document.getElementById("request_info_layer_button").style.borderBottom = "solid 4px #DFBC81";
}

}

完整的代码和按钮行为位于：http://jsfiddle.net/yp5an1w7/3/

Answer 1

第一次，isdisplay是空的，所以你跳到其他条件。在else完成后，样式设置为none。

第二个调用，将样式视为无，并将其更新为阻止，然后显示它。

如下所述，直接在id上添加display：none来解决问题

<div id="request_info_form_layer_wrapper" style="display:none;">

Answer 2

当你第一次点击时，onclick事件被触发并进入else部分，因为你的style属性没有设置，因此display会给你空值，它不等于'none'。因此它转到else部分并将display属性指定为'none'。所以

<div id="request_info_form_layer_wrapper" style="display:none">
<div id="request_info_form_wrapper">
    <form name="request_info" id="request_info_form" action="/somepage" method="post">
        <h3>Name</h3>
        <input type="text" id="name_input" /><br />
        <p>Preferred method of contact</p>
        <h3>Email</h3>
        <input type="text" id="email_input" /><br /><br />
        <h3>Phone</h3>
        <input type="text" id="phone_input" /><br /><br />
        <p>Thanks for your interest in our program. We'll only use your contact information to send additional materials to help you understand the program better.</p>
        <input type="submit" id="submit_button" value="SUBMIT" />
    </form>
</div>

如上所述，您的功能应该在第一次点击时起作用。

Answer 3

检查显示样式是否为none将失败。你可以通过改变你的CSS或交换你的函数来检查它是否被显示=='阻止'而不是isdisplayed =='none'。

这里有一个很好的解释：Why does my button need to be clicked twice for the event handler to work the first time, but thereafter just once?

Answer 4

元素的style属性和class属性之间存在差异。含义yourElement.style是附加到元素的属性。这与css类定义的样式不同。您可以为元素添加样式属性：

<div style="display:none;">...</div>

或访问底层的css类：

// pure JS
document.styleSheets[0].cssRules[0]
// but I would highly recommend to use jQuery:
$("#element").css("style", "none");
// and check via 
var isDisplayed = $("#element").css("style");

为什么我必须单击此输入按钮两次才能调用函数？

4 个答案: