Question

我正在使用this method进行按钮下拉。

我删除了文字，并添加了一个图标，像这样：

<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>

事件下拉菜单不适用于野生动物园中的图标

1 个答案: