Jqueryを使用してnaviconを切り替えてドロップダウンメニューを表示します（クリックも機能します）

Question

<li class="dropdown" id="dropdownquery"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i id="toggle" class="fa fa-bars" aria-hidden="true"></i> </a> 
       <ul class="dropdown-menu"> 
        <li><a class="dropdowntitle" href="#">About us</a></li> 
        <li><p class="dropdowntitle" href="#">More1</p></li> 
        <li><p class="dropdowntitle" href="#">More2</p></li> 
        <li><p class="dropdowntitle" href="#">More3</p></li> 
        <li><a class="dropdowntitle" href="#">FAQs</a></li> 
        <li><a class="dropdowntitle" href="#">Recent News</a></li> 
        <li><a class="dropdowntitle" href="#">Contact Us</a></li> 
       </ul> 
</li> 

私はNavbarをセットアップしました。上記のドロップダウンをクリックすると、ナビコンがハンバーガーから十字架に変更されます。私は、ドロップダウンがクリックされたときにトグルするために以下の作業が行われることを知っています：

}）;

しかし、navbarでは、メニューをクリックしてメニューをクリックすることもできます。メニューは再び最小化されます。これが起こると、ナビコンは元のナビコンに戻ることはありません。これをどうすればいいのですか？私は無用に以下を試した：

あなたの助けてくれてありがとう！

Answer 1

次のコードを使用して、ページの任意の場所でクリックイベントをキャプチャし、e.target.idを使用して、メニューがクリックされたかどうかを確認できます。このコードを必要に応じて調整する必要があるかもしれません。

this postを使用して問題を解決できましたか。

$('body').click(function(e) 
{ 
    var targetId = e.target.id; 
    if(targetId == "dropdownquery") 
    { 
     $('#toggle').addClass('fa fa-bars fa fa-times') 
    } 

    else 
    { 
     $('#toggle').removeClass('fa fa-bars fa fa-times') 
    } 
});