点击任意元素触发指定元素隐藏

在网页里,通常需要用到大量隐藏元素,通过点击事件使其显示。

一般被隐藏的元素都是通过一个点击事件去打开,但是如果只能再次点击同一个地方去关闭这个这个隐藏元素,用户体验就会变差,所以需要用到点击任意地方,触发隐藏指定的元素

 

效果图:

点击任意元素触发指定元素隐藏点击图标,隐藏元素显示点击任意元素触发指定元素隐藏

 

点击任意地方,元素隐藏:

点击任意元素触发指定元素隐藏

 

 

代码:

点击任意元素触发指定元素隐藏

利用addEventListener()触发监听事件,如果鼠标点击,进行判断点击的地方是否otherS元素内。如果在内,则打开隐藏元素,如果不在内,则关闭隐藏元素。

 

document.addEventListener('click', (e) => {

var 变量名= document.getElementById(触发隐藏元素显示的元素的ID);

if (变量名.contains(e.target)) {

   alert(“点击到了触发元素”)

} else {

   alert(“没点到触发元素~~”)

}

})