2017-10-21 36 views
0

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

+0

[Hier est un bon exemple avec javascript uniquement] (https://codepen.io/Ferhad/pen/OxZWNm) –

+0

@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

+0

la ligne 13 'var element = document.querySelector (". Has-submenu.is-open ");' le sélecteur doit être de classe is-open –

Répondre

3

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!

+0

J'ai ajouté votre code révisé au codepen https://codepen.io/anon/pen/EwMjrz mais il ne fonctionne toujours pas. – 109881

+1

Je vais supposer que vous n'avez pas réellement testé votre solution car votre sélecteur est incorrect et cela ne fonctionne que lorsque vous cliquez dans la section 'div' de ** WebsitePrimaryNav ** et pas ailleurs sur la page. – NewToJS

+0

Désolé, j'ai édité mon post qui avait une faute de frappe. Je l'ai testé sur le codepen fourni par @ 109881 (ajouter le point avant has-submenu dans la ligne) – 3Dos