尝试关闭下拉框时，下拉框打开，用户单击文档

Question

我试图隐藏我的下拉框，当用户点击它的打开状态之外，我使用一个标志isActive，确定菜单是否打开，然后我在文档上添加了一个点击事件来隐藏菜单，如果如果单击菜单，则打开并停止菜单上的分配。但是现在，当我单击我的下拉锚标记时，文档单击事件被触发。有人能告诉我如何解决这个问题吗？

JS

//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();
        });

Answer 1

我还没有测试它，但我认为您需要添加e.stopPropagation（），以防止事件冒泡：

  $('.btn-social-share').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        //...

http://api.jquery.com/event.stopPropagation/

Answer 2

设置一个条件，检查单击的内容是否在下拉列表中，然后隐藏下拉列表，如果单击的内容不在下拉列表中：

$(document).on('click', function(e){
    if( isActive && $(e.target).closest('.social-share-options').length === 0 ){
        $('.social-share-options').removeClass('is-active');
        isActive = false;
    }
});