点击空白处隐藏div方法

最新推荐文章于 2023-01-31 11:39:10 发布

饺子啊~

最新推荐文章于 2023-01-31 11:39:10 发布

阅读量3.4k

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/anLazyAnt/article/details/51420664

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一般写法：

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

饺子啊~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击空白处隐藏div方法

一般写法：html<button id="btn">点我显示div</button><div>我是点击btn后显示的div</div>jQuery// 取消冒泡方法（兼容写法）function cancel_Bubble() { //如果事件对象存在 var event = event || window.event; // w3c的方法
复制链接

扫一扫