Utilisation de Jquery pour basculer le menu déroulant navicon (le décoçage doit également fonctionner)

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> 

J'ai configuré ma barre de navigation. Lorsque je clique sur la liste déroulante ci-dessus, je voudrais que le navicon passe du hamburger à un croisement. Je sais que les opérations suivantes pour basculer lorsque la liste déroulante est cliquée:

$('.dropdown').click(function(){ 
$('#toggle').toggleClass('fa fa-bars fa fa-times') 

});

Cependant, la barre de navigation permet également à l'utilisateur de cliquer sur le menu et le menu se réduit à nouveau. Lorsque cela se produit, le navicon ne revient pas à son navicon d'origine. Comment puis-je y arriver? J'ai essayé ce qui suit en vain:

if ($('#dropdownquery').hasClass('dropdown open')) { 
    $('body').click(function(){ 
    $('#toggle').toggleClass('fa fa-bars fa fa-times') 
})}; 

Merci pour votre aide!

Answer 1

Vous pouvez utiliser le code suivant pour capturer l'événement click n'importe où sur la page et utiliser e.target.id pour vérifier si votre menu a été cliqué. Vous devrez peut-être adapter ce code à vos besoins. Vous auriez pu utiliser this post pour résoudre votre problème.

$('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') 
    } 
});