事件下拉菜單不適用於野生動物園中的圖標

Question

我將這種方法用於按鈕下拉菜單。

我刪除了文本，並添加了一個圖標，就像這樣：

<button onclick="myFunction()" class="dropbtn"><i class="my-icon"></i></button>

它可以工作，但是在Safari上，當我單擊圖標時，下拉效果不起作用。

它適用於圖標，但是當我單擊上方時不起作用。

有人知道該怎么辦嗎？

JavaScript代碼：

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
} 

Answer 1

不一定令人信服，但看起來像野生動物園無法理解按鈕類型。 嘗試在您的html中添加type =“ button”

 <button onclick="myFunction()" type="button" class="dropbtn"><i class="my-icon"></i></button>