Dropdown on click overlay

#1

Hi all, Im having a issue and hope someone can help

I have menu with click function and when menu is open I want to have overlay active in background… that part seems just fine for now… and if I close menu clicking on button, still ok BUT if I click on body menu close but overlay still remain active.

Script Im using:

$(document).ready(function(jQuery) {

$('.drop-btn').on('click', function(e) { 


    // Use $(this) to access current clicked element
    if ($(this).hasClass("uk-open")) {
        $("body").addClass('drop');
    } else {
        $("body").removeClass('drop');
    }

})

});

thanks!

#2

Yeah you just need to pick up the event for clicking outside of the menu. When they click the body itself, just have it remove the class ‘drop’ in addition to the menu. The problem is just that clicking outside the menu item is not triggering all of the close functionality. I assume you have some code elsewhere that dismisses the menu itself, but not the overlay.

So the two choices are…

  1. You find out where the JS is for closing the menu when you click outside of it and add in the part to hide the overlay

  2. Add an event to trigger when clicking the body that will also remove the overlay in addition to the menu.