为什么我的jQuery Mobile页脚会出现,然后在用户点击背景时消失？

Question

我在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中,当用户点击背景时,页脚会消失.当用户再次单击背景时,将显示页脚.为什么？这是故意的吗？

Answer 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()方法.从jquery 1.7开始,on方法是新的.建议在.live()之上使用.delegate(),所以这样做:

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

Answer 2

简单的解决方案是在标头中添加以下属性:

data-tap-toggle="false"

......并且框架将为您处理它.

有关详细信息,请参阅工具栏小组件的tapToggle选项.