滑动 jQuery 面板在 iPad 上不起作用

Posted 2023-03-12

【中文标题】滑动 jQuery 面板在 iPad 上不起作用

【英文标题】：Sliding jQuery panel not working on iPad

【发布时间】：2012-01-14 18:32:35

【问题描述】：

我一直在玩 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】：

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

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

pointer: cursor;

【讨论】：

谢谢，刚刚试了一下 - 将它添加到 css 中的按钮 - 但它似乎没有用。