Question

我刚开始使用JS并尝试获取一个打开文本块的按钮，使用相同的按钮可以关闭块。一切正常，但第一次点击是焦点，第二次点击是打开文本块。首次点击时需要打开文本块。

希望你能用普通的JS帮助我......谢谢！

document.getElementById("homeBtn").addEventListener("click", function(){
    var x = document.getElementById("parText");
    var y = document.getElementById("homeBtn");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.innerHTML = "Sluiten";
    } else {
        x.style.display = "none";
        y.innerHTML = "Lees verder...";
    }
});

HTML：

<div>
    <button type="button" id="homeBtn">Lees verder...</button>
</div>
<div id="parText">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue. 
    Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet, 
    dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit, 
    sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris. 
    Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci. 
    Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.
    </p>
</div>

Answer 1

您需要先将display设置为none。当您的代码运行时，它将转到else部分，然后将display设置为none，因此不会发生任何事情。再次单击时，if语句现在为true，因为display设置为none且代码有效。我修复了你的代码。检查代码段。

＆＃13;

var y = document.getElementById("homeBtn");
var x = document.getElementById("parText");
x.style.display = "none";
y.addEventListener("click", function(){
if (x.style.display === "none") {
    x.style.display = "block";
    y.innerHTML = "Sluiten";
} else {
    x.style.display = "none";
    y.innerHTML = "Lees verder...";
}
});

＆＃13;

<button type="button" id="homeBtn">Lees verder...</button>
<div id="parText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam sed leo felis. Maecenas tincidunt orci id orci vulputate congue. 
Aliquam in molestie tortor. Sed erat felis, tincidunt id commodo sit amet, 
dignissim fringilla metus. Proin porta, justo eget sollicitudin hendrerit, 
sapien ligula imperdiet erat, vel hendrerit odio quam ut mauris. 
Etiam laoreet justo massa, ac pretium sem pharetra at. Nullam ut felis orci. 
Duis faucibus mauris libero, at semper nulla finibus vitae. In ut ex justo.
</p>
</div>

＆＃13;

Eventlistener函数需要两次单击

1 个答案: