Question

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

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

它工作正常，但只有当我点击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");
}

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

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>

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

1 个答案: