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.