jquery 移动点击事件答案

【问题标题】：jquery mobile tap eventjquery 移动点击事件
【发布时间】：2011-03-14 21:55:34
【问题描述】：

$(function() {
    $('.quickNav').live('tap',function(event) {
        if ($(".select_body").is(":hidden")) 
        {
                $(".select_body").show(); 
        } 
        else 
        {
            $(".select_body").hide(); 
        }        
    });
});

这可以正常工作，除非它一旦可见并且您再次点击它不会消失。

想法？

【问题讨论】：

标签： jquery events mobile jquery-mobile

【解决方案1】：

$('.quickNav').live('tap',function(event) {
    $(".select_body").toggle(); //  toggles the visibility/display of the element.
});

这与冗长的 if/else 脚本相同

请参阅 jQuery API 文档中的 toggle method documentation。

【讨论】：

【解决方案2】：

一旦元素被隐藏，它的高度和宽度都为零。这意味着当您点击同一个地方时，您实际上并没有再次点击该元素。

我建议将其不透明度设置为零。您可以这样做：

$(function() {
    $('.quickNav').live('tap',function(event) {
        if ($(".select_body").is(":hidden"))
        {
            $(".select_body").css("opacity", 1);
        } 
        else 
        {
            $(".select_body").css("opacity", 0);
        }        
    });
});

以及相同行为的更短版本：

$(function() {
    $('.quickNav').live('tap',function(event) {
        $(".select_body").css("opacity", 1 - parseInt($(".select_body").css("opacity")));
    });
});

我还没有实际测试过这段代码，所以我什至不知道它是否会运行！

注意：fadeOut() 将在其动画结束时使用 hide()，因此在这里并没有真正的帮助。

【讨论】：