为什么我的 jQuery Mobile 页脚在用户单击背景时出现然后消失？答案

【问题标题】：Why does my jQuery Mobile footer appear and then disappear when a user clicks the background?为什么我的 jQuery Mobile 页脚在用户单击背景时出现然后消失？
【发布时间】：2012-03-28 19:23:55
【问题描述】：

我的 jQuery Mobile 网站中有一个页脚。

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="/page1">Page 1</a></li>
            <li><a href="/logout">Logout</a></li>
        </ul>
    </div>
</div>

在 Google Chrome 中，当用户点击背景时，页脚会消失。当用户再次单击背景时，将出现页脚。为什么？这是有意的功能吗？

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

默认情况下这是启用的。这是在 JQM v 1.1-RC1 中禁用它的一些代码

$(document).on('pageinit','[data-role=page]', function(){
    $('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
});

我喜欢将它绑定到 taphold 事件。这对我来说更有意义。以下是如何做到这一点：

$(document).on('taphold', '[data-role=page]', function(){
    $('[data-position=fixed]').fixedtoolbar('toggle');
});

如果您使用 JQM v 1.0.1，则不能使用 .on() 方法。 on 方法是 jquery 1.7 的新方法。建议使用 .delegate() 而不是 .live() 这样做：

$(document).delegate('[data-role=page]','pageinit', function(){
    $.mobile.fixedToolbars.setTouchToggleEnabled(false);
});

【讨论】：

这个解决方案太复杂了，有一个更简单的方法
此解决方案也更强大，因为它允许您为所有页面配置它。我的上一个项目包括数千个 JQM 页面。我不想输入 data-tap-toggle=false 1000 次或更多次。

【解决方案2】：

简单的解决方案是将以下属性添加到您的标题中：

data-tap-toggle="false"

...框架会为你处理好它。

请参阅Toolbar Widget's tapToggle option 了解更多信息。

【讨论】：

OP 没有指定 jQM 版本