通过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指的是目标函数。