具有 onclick javascript 功能的 div 上的 FontAwesome 图标答案

【问题标题】：FontAwesome icons on divs that have onclick javascript functions具有 onclick javascript 功能的 div 上的 FontAwesome 图标
【发布时间】：2016-10-01 21:26:10
【问题描述】：

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

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

它工作正常，但只有当我点击 div（背景）或普通字符串（不是 fontawesome 字符串）时。当我点击 fontawesome 的图标时，它根本不会调用 javascript 脚本。我尝试使用按钮、跨度、锚点而不是 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");
}

有谁知道我做错了什么？谢谢

【问题讨论】：

用 css 格式化的菜单看起来类似这样：
|联系方式 |特点 v |
另外，您是否希望 click 事件仅在您单击图标或 li 元素中的任何位置时触发？

标签： javascript html button font-awesome

【解决方案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>

【讨论】：