Cliquer n'importe où pour fermer un menu

Bonjour à tous,

Je viens vers vous car je n'ai aucune compétence en Javascript et je pense grandement lire un tutoriel pour apprendre ce langage..

J'ai un menu style dropdown caché et lorsque j'appui suis un boutton, il apparait avec ceci :

<script type="text/javascript" style="display:none">
            (function($){

                $('#header__alerts').click(function(e){
                    e.preventDefault();
                    $('.notifications-alerts').toggleClass('with--dropdown');
                });

            })(jQuery);
        </script>

Avec le css, je joue avec la translation et il apparait. Mais, si je n'appuie pas sur le même boutton, il ne se referme pas autotmatiquement. J'ai donc pensé à faire ceci mais aucun effet :

<script type="text/javascript" style="display:none">
            (function($){

                $('#header__alerts').click(function(e){
                    e.preventDefault();
                    $('.notifications-alerts').toggleClass('with--dropdown');
                });

                $('!#header__alerts').click(function(e){
                    $('.notifications-alerts').removeClass('with--dropdown');
                });

            })(jQuery);
        </script>

Comment lui dire de fermer .with--dropdown si j'appuie sur le boutton ou n'importe où dans la page ? J'ai testé avec body mais il ne m'ouvre plus le dropdown, donc ça doit être autre chose.

Merci d'avance.