Question

So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.

This is the dropdown code:

function dropdown(){
    $('#smenubutton').click(function(e){
        var submenu = $(this).find('.submenu');

        if (submenu.is(':visible')){
            submenu.hide();
        }else{
            submenu.show();
        }
    });
}

however, a code like this:

 $(document).click(function(e){
            e.stopPropagation();
            $('.submenu').hide();
        });

will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can’t find any questions based on my needs) and close this question.

Answer 1

You should check if e.target is the submenu and hide the submenu only if it’s not (in this case i check if it has the class submenu)

$(document).click(function(e){
            if($(e.target).hasClass("submenu")){ 
              $('.submenu').hide();
            }
        });