JavaScript addEventListener需要2次點擊才能觸發功能

Question

這是我所經歷的一些演示：

http://jsfiddle.net/jajV6/

以下是代碼片段：

HTML：

<div id="frame">
<div class="bead col_a" id="a1"></div>
</div>

CSS：

#frame {
position: relative;
height: 205px;
}

.bead {
position: absolute;
background: black;
width: 50px;
height: 25px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}

.bead:hover {
background-color: white;
border: 1px solid black;
}

#a1 {
top: 0px;
}

JS：

var a1 = document.getElementById("a1");

function fiveToggle(bead1) {
    if (bead1.style.top === "0px"){
    bead1.style.top = "25px";
    } else {
    bead1.style.top = "0px";
    }
}

a1.addEventListener("click", function(){ fiveToggle(a1); }, false);

其想法是在單擊時使珠子的位置向上或向下移動。 換句話說，要切換。 但是，向實現此功能的函數中添加if / else語句會使可點擊項在移動之前需要兩次單擊。 經過最初的額外單擊后，珠子會根據需要單擊一下來移動。 如果我從重新定位珠子的函數中刪除了if / else語句，並添加了簡單地移動珠子的代碼（沒有條件檢查），那么它將按預期工作。 我覺得這很好奇。 有人可以對我解釋一下為什么會這樣嗎？

Answer 1

addEventListener沒問題，您必須添加一個條件|| bead1.style.top == "" || bead1.style.top == ""因為bead1.style.top默認為空：

function fiveToggle(bead1) {
    if (bead1.style.top == "0px" || bead1.style.top == ""){
        bead1.style.top = "25px";
    } else {
        bead1.style.top = "0px";
    }
}

您也可以使用css來做到這一點，將初始最大值設置為0px