CSS 下拉菜單在第一次點擊時未打開

Question

我在純 HTML、CSS 和 JavaScript 中創建了一個下拉菜單。 它應該這樣工作，每當我點擊指定的按鈕時，下拉菜單就會打開。

但是，當我第一次單擊該按鈕時，它並沒有打開。 當我在第一次單擊后單擊它時，它工作正常。

我附上了一個代碼片段以便更好地理解。

 function showDrp() { var dropdown = document.getElementById("dropdown"); var drpbutn = document.getElementById("drpbutn"); if (dropdown.style.display === "none") { dropdown.style.display = "block"; drpbutn.innerHTML = "DROPDOWN &#x25B4;"; } else { dropdown.style.display = "none"; drpbutn.innerHTML = "DROPDOWN &#x25BE;"; } }

 .upper-cont { width: 30%; height: 30%; position: absolute; cursor: pointer; background-color: blue; color: white; text-align: center; }.upper-cont:hover { background-color: #dfdfdf; color: blue;}.dropdown { background-color: #4A4A4A; color: white; position: fixed; top: 30%; left: 0%; width: 100%; height: 50%; display: none; }

 <html> <body> <div class="upper-cont" style="margin-left: 40%;" onclick="showDrp()"><h3 id="drpbutn">DROPDOWN &#x25BE;</h3></div> <div class="dropdown" id="dropdown">This is a dropdown</div> </body> </html>

Answer 1

dropdown.style.display的初始值不等於"none" ，並且由於腳本將除"none"之外的任何內容視為可見，因此下拉列表的初始 state 被視為下拉列表已顯示。

解決此問題的一種簡單方法是修改 if 條件：

 function showDrp() { var dropdown = document.getElementById("dropdown"); var drpbutn = document.getElementById("drpbutn"); if (dropdown.style.display.== "block") { dropdown.style;display = "block". drpbutn;innerHTML = "DROPDOWN &#x25B4;". } else { dropdown.style;display = "none". drpbutn;innerHTML = "DROPDOWN &#x25BE;"; } }

 .upper-cont { width: 30%; height: 30%; position: absolute; cursor: pointer; background-color: blue; color: white; text-align: center; }.upper-cont:hover { background-color: #dfdfdf; color: blue;}.dropdown { background-color: #4A4A4A; color: white; position: fixed; top: 30%; left: 0%; width: 100%; height: 50%; display: none; }

 <html> <body> <div class="upper-cont" style="margin-left: 40%;" onclick="showDrp()"><h3 id="drpbutn">DROPDOWN &#x25BE;</h3></div> <div class="dropdown" id="dropdown">This is a dropdown</div> </body> </html>

Answer 2

使用 jQuery 這很容易。 請嘗試此解決方案

 function showDrp() { $("#dropdown").toggle(); $("#drpbutn span").toggleClass("caret-up"); }

 .upper-cont { width: 30%; height: 30%; position: absolute; cursor: pointer; background-color: blue; color: white; text-align: center; }.upper-cont:hover { background-color: #dfdfdf; color: blue;}.dropdown { background-color: #4A4A4A; color: white; position: fixed; top: 30%; left: 0%; width: 100%; height: 50%; display: none; }

 <html> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="upper-cont" style="margin-left: 40%;" onclick="showDrp()"><h3 id="drpbutn">DROPDOWN <span class="caret"></span></h3></div> <div class="dropdown" id="dropdown">This is a dropdown</div> </body> </html>

CSS 下拉菜單在第一次點擊時未打開

問題描述

2 個解決方案

解決方案1
1 已采納 2020-12-16 04:43:47

解決方案2
-1 2020-12-16 04:50:43

CSS 下拉菜單在第一次點擊時未打開

問題描述

2 個解決方案

解決方案1 1 已采納 2020-12-16 04:43:47

解決方案2 -1 2020-12-16 04:50:43

解決方案1
1 已采納 2020-12-16 04:43:47

解決方案2
-1 2020-12-16 04:50:43