点击任意元素触发指定元素隐藏
在网页里,通常需要用到大量隐藏元素,通过点击事件使其显示。
一般被隐藏的元素都是通过一个点击事件去打开,但是如果只能再次点击同一个地方去关闭这个这个隐藏元素,用户体验就会变差,所以需要用到点击任意地方,触发隐藏指定的元素
效果图:
点击图标,隐藏元素显示
点击任意地方,元素隐藏:
代码:
利用addEventListener()触发监听事件,如果鼠标点击,进行判断点击的地方是否otherS元素内。如果在内,则打开隐藏元素,如果不在内,则关闭隐藏元素。
document.addEventListener('click', (e) => {
var 变量名= document.getElementById(触发隐藏元素显示的元素的ID);
if (变量名.contains(e.target)) {
alert(“点击到了触发元素”)
} else {
alert(“没点到触发元素~~”)
}
})