青岛网站建设新闻资讯

点击空白处隐藏div元素的jQuery方法

时间:2023-04-10 已阅读:760次 | 作者:青岛网站建设

首页>新闻资讯>建站知识

点击空白处隐藏div元素的jQuery方法。

一般写法:

html

<button id="btn">点我显示div</button>
<div>我是点击btn后显示的div</div>

jQuery

// 取消冒泡方法(兼容写法)function cancel_Bubble() {
//如果事件对象存在
var event = event || window.event;// w3c的方法
if (event && event.stopPropagation) {
event.stopPropagation();
} else {// ie的方法
event.cancelBubble = true;
}
}

$("#btn").click(function(){
// 点击按钮时 显示div
$("div").toggle();// 调用取消冒泡方法
cancel_Bubble();
});

$("body").click(function(){
// 点击body时 隐藏 div
$("div").hide();
});

行内写法:

html

<body onclick="hideShow(this)"><button onclick="showDiv(this)">点我显示div</button><div>我是点击btn后显示的div</div></body>

jQuery

// 取消冒泡方法(兼容写法)function cancel_Bubble() {
//如果事件对象存在
var event = event || window.event;// w3c的方法
if (event && event.stopPropagation) {
event.stopPropagation();
} else {// ie的方法
event.cancelBubble = true;
}
}function showDiv(obj) {
// 点击按钮时 显示div
$(obj).siblings("div").toggle();// 调用取消冒泡方法
cancel_Bubble();
}function hideShow(obj) {
// 点击body时 隐藏 div
$(obj).hide();
}

经测试,此法仅限于安卓机,如果要适配苹果手机,请使用touch事件


二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1394.html

相关资讯

Copyright © 2011-2024 青华互联-青岛青华锐思网络科技有限公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图