onclick javascript関数を持つdivのFontAwesomeアイコン

Question

メニューを識別する文字列の近くに、矢印のfontawesome（caret-down）からアイコンを配置するドロップダウンメニューを作成しようとしています。

次に、メニューを表示するJavaScriptコードを呼び出すonclickイベントをボタンdivに挿入しました。

これはうまく動作しますが、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

私の知る限り見ることができるように、あなたのコードは動作します：

メニューは次のような表示されたCSSでフォーマットされた

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>