如何單擊一次 function 運行？

Question

我希望我的函數（dropFunction()，這使得 div #dropdownList 出現）在第一次單擊我的按鈕（#drop-btn）時運行，但是，我必須單擊它兩次才能運行 function，但只有第一次時間。 第一次雙擊后，它會正常運行。 我如何使它在第一次點擊時運行，而不是第一次點擊第二次？ CSS：

 function dropFunction() { var x = document.getElementById("dropdownList") if (x.style.display === "none") { x.style.display = "block" } else { x.style.display = "none" } }

 #dropdownList { display:none; }

 <div class="dropdown"> <button onclick = "dropFunction()" class="drop-btn">Menu</button> <div id="dropdownList"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

Answer 1

您必須使用window.getComputedStyle(x)從 CSS 獲取值

 function dropFunction() { var x = document.getElementById("dropdownList") if (window.getComputedStyle(x).display === "none") { x.style.display = "block" } else { x.style.display = "none" } }

 #dropdownList { display:none; }

 <div class="dropdown"> <button onclick = "dropFunction()" class="drop-btn">Menu</button> <div id="dropdownList"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

Answer 2

您可以使用 2 種解決方案。

1.

if(x.style.display === "無")

=>

if(window.getComputedStyle(x).display === "none")

或者

2.

<div id="dropdownList">

=>

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

 function dropFunction() { var x = document.getElementById("dropdownList") if (window.getComputedStyle(x).display === "none") { x.style.display = "block" } else { x.style.display = "none" } }

 #dropdownList { display:none; }

 <div class="dropdown"> <button onclick = "dropFunction()" class="drop-btn">Menu</button> <div id="dropdownList"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

 function dropFunction() { var x = document.getElementById("dropdownList") if (x.style.display === "none") { x.style.display = "block" } else { x.style.display = "none" } }

 #dropdownList { display:none; }

 <div class="dropdown"> <button onclick = "dropFunction()" class="drop-btn">Menu</button> <div id="dropdownList" style="display:none;"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>