Tunechi Tunechi - 8 months ago 36
jQuery Question

Javascript Jquery Dropdown hides on whitespace, however it breaks the dropdown until refresh

$('button.dropnav-toggle').on('click', function(e) {
$('.not-header').on('click', function(e) {
if (!$(event.target).closest('.drop-menu').length) {

I have a dropdown hamburger with bootstrap. This code works for the most part, however I'm running into a wall. It successfully drops down and becomes hidden when clicking on anything besides the header. After clicking off the dropdown it successfully hides, however the only way to be able to click and have it dropdown again is after a page refresh.


You are setting new listener every time user opens a dropdown. Make it simplier.

You need one listener which toggles menu:

$(document).on('click', '.dropnav-toggle', function(e) {

    e.stopPropagation(); //stop propagation of the event
    $('#parent-dropnav').toggleClass('parent-open'); //not sure if you need this one

And another one which closes dropdown

   $('body').on('click', function(e) {


Now if user clicks on any element with class .dropnav-toggle your dropdown will toggle - open or close depending on previous state. Any other click on body will close the menu. Not tested but should work.