您的位置：首页 > Web前端 > JQuery

点击空白处隐藏div方法

2016-05-16 00:50 716 查看

一般写法：

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事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery

相关文章推荐

新的分享

章节导航