点击空白处隐藏div元素的jQuery方法。
一般写法:
<button id="btn">点我显示div</button> <div>我是点击btn后显示的div</div>
// 取消冒泡方法(兼容写法)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(); });
<body onclick="hideShow(this)"><button onclick="showDiv(this)">点我显示div</button><div>我是点击btn后显示的div</div></body>
// 取消冒泡方法(兼容写法)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事件
copy © 2025 星澜网络 All Rights Reserved
备案号:鲁ICP备2023015769号