jquery 点击元素之外的任意地方隐藏消失该元素

jquery 点击元素之外的任意地方隐藏消失该元素

今天在做需求的时候发现现做的方法不对，研究发现可行，来给秀儿上座，看图，看代码。

1.html片段

<td style="position: relative;">
    <div class="find_display_flex" style="justify-content: left">
        <div class="find_display_flex_son">
             <span class="tag_color  tag_one" title="四川省">四川省</span>
             <span class="tag_color_pink" title="成都市">成都市</span>
        </div>
        <p class="find_down" onclick="isTag(this,event)">
            <img src="$!root/images/Icon/DownArrow.png" alt="图片已过期">
        </p>
    </div>
    <div class="table_tag tagColor hide">
    	<!-- 这块循环出来的，也就是点击完之后要显示的内容 -->
        #foreach($tagName in $!item.tagNameList)
            <span >$!tagName</span>
        #end
    </div>
</td>

2.js片段

注：要阻止冒泡事件，不然document的事件对显示隐藏内容无效！

$(document).click(function(){ //点击其它地方消失
    $(".once img").css({transform: 'rotate('+0 + 'deg)'}) //箭头旋转位置
    $(".find_display_flex .find_down").removeClass('once'); //移除once类名，不然下一步要点两次才生效
    $('.table_tag').hide(); //隐藏内容
});
function isTag(obj,event) {  //是否显示隐藏标签
    event.stopPropagation(); //注意：必需要阻止冒泡事件
    $(".tagColor").hide(); //这块是点击之前把所有的先隐藏了
    $(".find_display_flex .find_down").removeClass('once'); //移除once类名
    if ($(obj).hasClass('once')) {
        $(obj).removeClass('once');
        $(obj).parent().next('.tagColor').hide();
    } else {
        $(obj).addClass('once');
        $(obj).parent().next('.tagColor').show();
    }
}