如何用两根手指点击显示/隐藏 jQuery 移动标题？答案

【问题标题】：How to show/hide jQuery mobile header with two finger tap?如何用两根手指点击显示/隐藏 jQuery 移动标题？
【发布时间】：2013-04-25 20:16:40
【问题描述】：

我正在使用 phonegap 和 jquery mobile 制作一个 web 应用程序，如果你用两根手指点击屏幕上的任意位置，标题显示和隐藏，我试图让它在哪里。

我在每个页面上都有一个带有“标题”类的标题 div。我想我可以选择这个类的所有内容并使用 jGestures 来显示/隐藏（我以前从未使用过 jGestures，而且我是 jquery 的新手，所以这可能是我的问题）。我现在拥有它的方式似乎只有在您点击 div 时才会显示和隐藏，而我希望能够点击屏幕上的任何位置。

这是我所拥有的：

<div class="header" data-role="header">
    <a href="#" data-icon="arrow-l" data-rel="back" data-transition="slide" data-direction="reverse">Choose Grid</a>
    <h1>Add Images</h1>
    <a href="#choosePage" class="saveGrid" data-icon="check" data-transition="slide" data-theme="b">Done</a>
</div>

$(document).ready(function(){   
    $("#header").bind("taptwo", function(){
        $("#header").hide();
    }); 
});

我知道我可能还差得很远，但是有什么想法吗？ jQuery mobile 是否有一些我应该使用的内置手势？

【问题讨论】：

移除 .ready 函数。仅使用此$(document).on('taptwo', function () { stuff here });

标签： javascript jquery cordova jquery-mobile show-hide

【解决方案1】：

你应该这样使用它：

$(document).ready(function(){
    $('body').bind('taptwo', function(){
        $(".header").toggle();
    });
});

这会为整个页面设置事件。该事件将在您双击的任何地方触发。请记住，它会干扰同一页面上的其他双击元素。

【讨论】：

谢谢乔。这似乎可行，但尝试此代码后仍然没有运气。我不知道我是否错误地使用了 jgestures，或者是否是 jquery mobile 的一些奇怪的东西导致了这个......
您确定在您的页面上包含jgestures 吗？
是的......我刚刚意识到我在我的javascript顶部输入了一个随机的“d”，这显然破坏了一切。现在可以了，谢谢！
@WillRyan 如果是这种情况，那么你应该删除这个问题，因为这对未来的人们没有帮助。
@Jasper - 他原来的 javascript 无法正常工作，因为他绑定到了错误的元素。他使用了我的 javascript（这解决了他的问题），但不小心输入了一个“d”，导致我的解决方案无法正常工作。

【解决方案2】：

试试这个

$(document).ready(function(){   

$(".header").bind("taptwo", function(){
    $(".header").hide();
})

【讨论】：

这并不能解决 OP 的问题，您仍然将事件附加到页眉而不是页面的其余部分。