除指定区域外点击任何地方隐藏DIV

短命女 2022-04-04 05:17 281阅读 0赞

方式一:
    
    <div class="btn" id="btn">btn</div>
    <div class="box"></div>
    
    $('.btn').on('click',function(e){
        $('.box').show();
        e.stopPropagation();
    })
    $('body').on('click',function(){
        $('.box').hide();
    })

方式二:
    
     <div class="btn" id="btn">btn</div>
     <div class="box"></div>    
    
    $('body').click(function(e) {
            var target = $(e.target);
    
            // 如果#overlay或者#btn下面还有子元素，可使用
            // !target.is('#btn *')
            if(target.is('#btn')){
                $('.box').show();
            }else{
                $('.box').hide();
            }
        });

方法三:
    
    
     <div class="btn" id="btn">btn</div>
     <div class="box"></div>
    
    
    //判断:当前元素是否是被筛选元素的子元素 
        // jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; 
    
        //判断:当前元素是否是被筛选元素的子元素或者本身 
        jQuery.fn.isChildAndSelfOf = function(b){ return (this.closest(b).length > 0); };
        $(document).click(function(event){ 
            if(!$(event.target).isChildAndSelfOf('#btn')){
                $('.box').hide();
            }
        });
    
        $('#btn').on('click',function(){
            $('.box').show();
        })

转载地址：[https://www.jianshu.com/p/2a08cb1d7dfe][https_www.jianshu.com_p_2a08cb1d7dfe]

[https_www.jianshu.com_p_2a08cb1d7dfe]: https://www.jianshu.com/p/2a08cb1d7dfe