trying to close dropdown menu when dropdown menu is open and user clicks document
<p>Im trying to hide my dropdown menu when the user clicks outside of its open state, Im using a flag <code>isActive</code> that determines whether or not the menu is open and then I have added a click event on the document to hide the menu if open and stop propogation on the menu if it is clicked. Right now however when I click my dropdown anchor tag the document click event is fired. Can anyone advise how I fix this?</p>

<p>JS</p>

<pre><code>//User profile share tooltip
        $('.btn-social-share').on('click', function(e){
            e.preventDefault();

                if( !isActive ){
                    $('.social-share-options').show();
                    isActive = true;
                } else {
                    $('.social-share-options').hide();
                    isActive = false;
                }

        });

        /* Anything that gets to the document
           will hide the dropdown */
        $(document).on('click', function(){
            if( isActive ){
                $('.social-share-options').hide();
                isActive = false;
            }
        });

        /* Clicks within the dropdown won't make
           it past the dropdown itself */
        $('.social-share-options').click(function(e){
          e.stopPropagation();
        });
</code></pre>
