Jquery iPad悬停/单击

Question

我正试图在ipad上构建一个div，点击一次就会展开，然后在下一次点击时真正打开以填充浏览器窗口，我不确定如何做到这一点，这是我的代码：

var elems = $( ".event" );
    elems.bind("click touchstart", function(){
    if ( $(this).hasClass( "hovered" ) ) {
        $(this).removeClass("hovered");
        $(this).addClass("open");
        elems.not(this).addClass('closed');
        $(this).find('.close-btn').fadeIn();
    } else {
        $(this).removeClass("hovered not-hovered");
        $(this).addClass("hovered");
        elems.not(this).addClass('not-hovered');
    };
});

因此，基本上，在第一次单击时，div（.event）会稍微展开一点，采用"悬停"类，如果该类存在于div上，并且您单击它应该展开以填充屏幕（采用"打开"类）。。。它似乎在我的兄弟中有效，但在ipad上无效，有什么想法吗？

这是我的开发链接，只是以防万一：nyeto.com-在你的ipad 上检查它

Answer 1

iOS在touchstart+touchend之后不久触发click事件，因此您的代码可能会连续快速触发两次。

尝试取消两个事件：

elems.bind("click touchstart", function(e){
    e.preventDefault();
    // rest of your code

---

另一种方法是在touchstart上激发click事件并取消后者：

elems.bind("touchstart", function(e){
    e.preventDefault();
    $(this).trigger('click');
});
elems.bind("click", function(e) {
    // rest of your code