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.Comment faire pour supprimer la classe toggled lorsque vous cliquez à l'extérieur du 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
[Hier est un bon exemple avec javascript uniquement] (https://codepen.io/Ferhad/pen/OxZWNm) –
@FerhadOthman Votre solution ne fonctionne pas. Il permet au premier élément de menu (dans ce cas, "articles") de se réduire lorsque vous cliquez en dehors de la div, mais les éléments de menu suivants ne sont pas affectés. Voir https://codepen.io/hioioasd90/pen/qPwBEW – 109881
la ligne 13 'var element = document.querySelector (". Has-submenu.is-open ");' le sélecteur doit être de classe is-open –