Comment faire pour supprimer la classe toggled lorsque vous cliquez à l'extérieur du menu

Question

Le menu déroulant est conçu avec CSS et HTML/JS en utilisant une classe appelée "is-open" qui est ajoutée à partir de JS. Une fois présent dans le code HTML spécifié, il activera le CSS pour afficher le sous-menu.

Cependant, il existe un petit problème dans lequel le menu déroulant une fois cliqué ne disparaîtra pas à moins que le même élément de menu ne soit cliqué. En tant que fonctionnalité de base, ce menu doit disparaître dès qu'un utilisateur clique non seulement sur le menu, mais n'importe où sur la page.

Mon présent javascript est le suivant:

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
     e.stopPropagation(); 
     if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
     } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
     } 
    }); 
}); 

Voici un exemple codepen du code: https://codepen.io/anon/pen/EwMjrz

Answer 1

Vous pouvez ajouter un écouteur d'événement au document pour fermer votre menu comme si

$(document).ready(function() { 
    $(".has-submenu").click(function(e) { 
    e.stopPropagation(); 
    if($(this).hasClass("is-open")) { 
     $(this).removeClass("is-open"); 
    } else { 
     $(".has-submenu").removeClass("is-open"); 
     $(this).addClass("is-open"); 
    } 
    }); 
    $(document).on('click', function (e) { 
    e.stopPropagation(); 
    $('.has-submenu').removeClass("is-open"); 
    }); 
}); 

Cela devrait faire l'affaire!