先看下面这段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]