onclick 第一次需要點擊兩次

Question

我剛剛開始學習JavaScript。

我寫了一個簡單的下拉菜單，但是當您最初加載頁面時，需要單擊“下拉”按鈕兩次（具有onclick屬性）才能顯示鏈接列表。

之后，它會按預期工作 - 您只需單擊一次按鈕即可顯示/隱藏列表。

但為什么我在初始加載網站后必須點擊按鈕兩次？

這是我的 HTML/CSS：

 #dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } #dropdown { position: relative; display: inline-block; } #dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } #dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } #dropdown-content a:hover {background-color: #f1f1f1} /*#dropdown:hover #dropdown-content { display: block; }*/ #dropdown:hover #dropbtn { background-color: #3e8e41; }

 <h2>Dropdown Menu</h2> <p>Just a simple menu with link list</p> <div id="dropdown"> <button id="dropbtn" onclick="myFunction()">Dropdown</button> <div id="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <script> function myFunction() { if (document.getElementById('dropdown-content').style.display == "none") {document.getElementById('dropdown-content').style.display = "block";} else {document.getElementById('dropdown-content').style.display = "none";} } </script>

Answer 1

在最初情況下，除非使用內聯樣式屬性設置css屬性，否則display屬性的值將是不確定的，因此請切換if條件和代碼塊。

function myFunction() {
  // cache the element for later use, which is one of the best practice 
  var ele = document.getElementById('dropdown-content');

  if (ele.style.display == "block") {
    ele.style.display = "none";
  } else {
    ele.style.display = "block";
  }
}

 #dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } #dropdown { position: relative; display: inline-block; } #dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } #dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } #dropdown-content a:hover { background-color: #f1f1f1 } /*#dropdown:hover #dropdown-content { display: block; }*/ #dropdown:hover #dropbtn { background-color: #3e8e41; } 

 <h2>Dropdown Menu</h2> <p>Just a simple menu with link list</p> <div id="dropdown"> <button id="dropbtn" onclick="myFunction()">Dropdown</button> <div id="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <script> function myFunction() { // cache the element for later use var ele = document.getElementById('dropdown-content'); if (ele.style.display == "block") { ele.style.display = "none"; } else { ele.style.display = "block"; } } </script> 

---

或使用內聯樣式屬性設置display屬性。

<div id="dropdown-content" style="display:none">
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
</div>

 #dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } #dropdown { position: relative; display: inline-block; } #dropdown-content { position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } #dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } #dropdown-content a:hover { background-color: #f1f1f1 } /*#dropdown:hover #dropdown-content { display: block; }*/ #dropdown:hover #dropbtn { background-color: #3e8e41; } 

 <h2>Dropdown Menu</h2> <p>Just a simple menu with link list</p> <div id="dropdown"> <button id="dropbtn" onclick="myFunction()">Dropdown</button> <div id="dropdown-content" style="display:none"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <script> function myFunction() { // cache the element for later use var ele = document.getElementById('dropdown-content'); if (ele.style.display == "none") { ele.style.display = "block"; } else { ele.style.display = "none"; } } </script> 

---

取自MDN Docs：

HTMLElement.style屬性用於獲取和設置元素的內聯樣式。 獲取時，它將返回CSSStyleDeclaration對象，該對象包含該元素的所有樣式屬性的列表，並為該元素的內聯樣式屬性中定義的屬性分配了值。 有關可通過樣式訪問的CSS屬性的列表，請參見《 CSS屬性參考》。 在CSS級聯中，style屬性具有與通過style屬性設置的內聯樣式聲明相同（且最高）的優先級。

Answer 2

HTML元素的style屬性不是從應用於該元素的css樣式派生的。 因此，在訪問style.display時，您不會訪問#dropdown-content 。 相反，您可能要做的是根據其狀態添加或刪除一個css類。

您的代碼采用的示例：

 #dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } #dropdown { position: relative; display: inline-block; } .hide { display: none; } #dropdown-content { position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } #dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } #dropdown-content a:hover { background-color: #f1f1f1 } /*#dropdown:hover #dropdown-content { display: block; }*/ #dropdown:hover #dropbtn { background-color: #3e8e41; } 

 <h2>Dropdown Menu</h2> <p>Just a simple menu with link list</p> <div id="dropdown"> <button id="dropbtn" onclick="myFunction()">Dropdown</button> <div id="dropdown-content" class="hide"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <script> function myFunction() { let element = document.getElementById('dropdown-content'); if (element.classList.contains('hide')) { element.classList.remove('hide') } else { element.classList.add('hide') } } </script> 

Answer 3

實際上，您的dropdown-content在開始時就沒有樣式，它與css相關聯。 只需聲明顯示內容即可：聲明中沒有內容，它將按預期工作。

 #dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } #dropdown { position: relative ; display: inline-block; } #dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } #dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } #dropdown-content a:hover {background-color: #f1f1f1} /*#dropdown:hover #dropdown-content { display: block; }*/ #dropdown:hover #dropbtn { background-color: #3e8e41; } 

 <h2>Dropdown Menu</h2> <p>Just a simple menu with link list</p> <div id="dropdown"> <button id="dropbtn" onclick="myFunction()">Dropdown</button> <div id="dropdown-content" style="display: none"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <script> function myFunction() { if (document.getElementById('dropdown-content').style.display == "none") {document.getElementById('dropdown-content').style.display = "block";} else {document.getElementById('dropdown-content').style.display = "none";} } </script> 

Answer 4

我遇到了同樣的問題，基本上第一次單擊激活了Javascript中的事件處理程序，第二次單擊實際上是有效的。

要解決此問題，請在頁面加載到HTML文件后立即調用事件處理程序：

<body onload="myFunction()">

使用電話時，這也可使首次單擊工作。

Answer 5

只需更換none以block和block有none在功能上，這就是你所需要的。

Answer 6

@sdleihssirhc在另一篇文章中講述如何檢查元素是否正在顯示。 查看這篇文章 。

return element.currentStyle ? element.currentStyle.display :
                          getComputedStyle(element, null).display;

這將為您提供樣式化元素的價值。

Answer 7

另一種方法，涉及丹尼斯·斯皮倫堡，答案是改變

    function myFunction() {
    if (document.getElementById('dropdown-content').style.display == "none") 
     {document.getElementById('dropdown-content').style.display = "block";}
    else {document.getElementById('dropdown-content').style.display = "none";}
    }

到

    function myFunction() {
      const myElement = document.getElementById('dropdown-content');
      const myElementDisplay = getComputedStyle(myElement);
      if (myElementDisplay.display === "none") {
        myElement.style.display = "block";
    }
      else {
        myElement.style.display = "none";
      }
    }