滑动jQuery面板无法在iPad上运行

时间:2012-01-14 18:32:35

标签: javascript jquery ios ipad wordpress

我一直在玩Wordpress和jQuery - 对我来说都是新手。我正在处理的博客在页面顶部有一个固定的标题,有两个按钮,每个按钮使用jQuery在博客内容上向下滑动面板。

问题是在iPad上点击按钮时没有任何反应 - 除了由于某种原因,它加载无限滚动。我听说IOS不喜欢position:fixed但是我不明白它对按钮/滑动内容有什么影响。任何信息/提示都会受到极大的欢迎。

* 编辑:看起来.click在iPad上无效(?),我需要以某种方式将其换成触摸事件。

CSS

> .about, .contact {
>     background: none repeat scroll 0 0 #000000;
>     display: none;
>     height: 500px;
>     position: fixed;
>     top: 90px;
>     width: 100%;
>     z-index: 100; }

的jQuery

 $('.about_btn').click(function(e) {
    if($(this).hasClass('open')) {
        $('.about').slideToggle('slow');
        $('.about_btn').removeClass('open');
        return false;
    } else {
        $('.about').slideToggle('slow');
        $('.contact').hide();
        $('.about_btn').addClass('open');
        $('.contact_btn').removeClass('open');
    }
});

 $('.contact_btn').click(function(e) {
    if($(this).hasClass('open')) {
        $('.contact').slideToggle('slow');
        $('.contact_btn').removeClass('open');
        return false;
    } else {
        $('.contact').slideToggle('slow');
        $('.about').hide();
        $('.contact_btn').addClass('open');
        $('.about_btn').removeClass('open');
    }
});

$('.close').click(function(e) {
    e.preventDefault();
        $('.about').slideUp('slow');
        $('.contact').slideUp('slow');
        $('.about_btn').removeClass('open');
        $('.contact_btn').removeClass('open');
});

1 个答案:

答案 0 :(得分:2)

我在iOS上遇到jQuerys“点击”事件的问题几次。

对我有用的解决方案是将此css添加到可点击元素...

pointer: cursor;