jQuery 遍历 - closest() 方法实现点击元素本身以外隐藏元素

通过jQuery 遍历 - closest() 方法实现点击ele2以外的元素隐藏ele2
需求:
点击ele1显示ele2后,再次点击ele1隐藏ele2(或者点击ele2以外的元素隐藏ele2)

    //点击ele1显示隐藏ele2后,再次点击ele1隐藏ele2
    $("ele1").click(function(){
        if($("ele2").css('display') == 'none'){
            $("ele2").show();
        }else {
            $("ele2").hide(); 
        }
    });
    //点击ele2以外的元素隐藏ele2
    $(function(){ 
        $(document).bind("click",function(e){ 
            var target = $(e.target); 
            if(target.closest("ele2").length == 0){ 
                $("ele2").hide(); 
            } 
        });
    }); 

通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时,隐藏ele2。
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

closest()的方法作用是:从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
使用例子为:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
    //当被最接近的列表元素或其子后代元素被点击时,会切换黄色背景
});

此处使用e.target 而不使用this的原因是:this会冒泡,e.target不冒泡(就是指向事件触发的dom)。
this冒泡,指的是会将目标函数点击的事件不自身处理,将事件委托到他的父元素节点上。
e.target指的是目标函数。

猜你喜欢

转载自blog.csdn.net/marslover521/article/details/79743097