javascript - 具有 onclick javascript 函数的 div 上的 FontAwesome 图标

Question

我正在尝试构建一个下拉菜单，在其中，在标识菜单的字符串附近，我放置了一个箭头图标(caret-down)。

然后，我将 onclick 事件放入按钮 div 中，该事件调用使菜单可见的 javascript 代码。

它工作正常，但只有当我点击 div (背景)或普通字符串(不是 fontawesome 的)时。当我点击 fontawesome 的图标时，它根本不调用 javascript 脚本。我尝试使用按钮、跨度、 anchor 来代替 div，但它从未正常工作......

这是 HTML:

    <ul>
        <li><a href="#contacts">contacts</a></li>
        <li>
          <a href="javascript:void(0)" class="dropbtn" onClick="dropDown('dropFeauture');">feautures&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></a>
          <div class="dropdown-content dropdown" id="dropFeauture" >
            <a href="#">News</a>
            <!-- other things -->
          </div>
        </li>
    </ul>

这是我的简单 Javascript:

function dropDown(drop) {
    document.getElementById(drop).classList.toggle("show");
}

有人知道我做错了什么吗？谢谢

Answer 1

据我所知，您的代码有效:

function dropDown(drop) {
  document.getElementById(drop).classList.toggle("show");
}

#dropFeauture {
  display: none;
}
.show {
  display: block !important;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<ul>
  <li><a href="#contacts">contacts</a>
  </li>
  <li>
    <a href="javascript:void(0)" class="dropbtn" onClick="dropDown('dropFeauture');">feautures&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></a>
    <div class="dropdown-content dropdown" id="dropFeauture">
      <a href="#">News</a>
      <!-- other things -->
    </div>
  </li>
</ul>