先看下面这段JS代码:
[js] $(function () {
$(‘.icon-top’).on(‘click’, function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果.top-fnc是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$(this).next(‘.top-fnc’).toggle();
return false;
});
//点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
$(document).on(‘click’, function (event) {
var _con = $(‘.top-fnc’); // 设置目标区域
if (!_con.is(event.target) && _con.has(event.target).length === 0) {
$(‘.top-fnc’).hide(); //淡出消失
}
});
});
[/js]
如图,我点击向下箭头,下面的内容.top-fnc就会显示出来,再点击,.top-fnc隐藏,.top-fnc出现的同时,点击空白部分,.top-fnc也会隐藏起来。上面这段代码在PC上没有任何问题,但是在移动端上,点击空白部分,.top-fnc就不会隐藏了。
解决方案:
把JS中document稍作修改如下:
[js] $(function () {
$(‘.icon-top’).on(‘click’, function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果.top-fnc是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$(this).next(‘.top-fnc’).toggle();
return false;
});
//点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
$(‘div’).parents().on(‘click’, function (event) { //把document修改为div的所有父元素
var _con = $(‘.top-fnc’); // 设置目标区域
if (!_con.is(event.target) && _con.has(event.target).length === 0) {
$(‘.top-fnc’).hide(); //淡出消失
}
});
});
[/js]