Question

我似乎无法使我的字体很棒的图标可点击。把它们放在锚标签内是对其他有这个问题但对我不起作用的人最流行的回应。如果我点击锚标签内和图标周围的背景，它会显示我想要的下拉菜单，但如果我点击实际图标，下拉列表就不会打开。你可以想象，当大多数人试图点击图标时，这对移动设备来说是一种痛苦。请帮忙！

<div class="dropdown">
  <a onclick="myFunction()" class="dropbtn" href="#">  
    <i class="fas fa-pen-square"></i>  
    <h6 class="iconSub">News</h6>  
  </a>
  <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
  </div>
</div>

<script>
  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }

  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn' || '.fa--pen-square'))  {
      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');
        }
      }
    }
  }
</script>

Answer 1

我可点击以下格式：

＆＃13;

<a href="https://stackoverflow.com">
  <span title="Edit">
    <i class="fa fa-pencil" aria-hidden="true"></i>
  </span>
</a>

＆＃13;

Answer 2

以下格式对我来说效果很好：

<a href="#gotocontentdown">
    <i class="fa fa-angle-down fa-5x" aria-hidden="true"></i>
</a>

锚标签内的字体真棒图标无法点击。有办法吗？

2 个答案: