jQuery中簡單的onClick效果

我有一個非常簡單的網頁。這是我的Demo。jQuery中簡單的onClick效果

桌面：當我將鼠標懸停在圓圈，它擴展。

的iPad：當我點擊了一圈，它擴展。

但是，是否有可能（在iPad上），當圓是在「擴大」的狀態，如果我再次點擊它時，它收縮？

我會如何使用我現有的代碼來做到這一點？

的Javascript：

$('.circle').on('touchstart',function(){});

的任何幫助，非常感謝。

來源

2013-05-05 michaelmcgurk

var events = "mouseover mouseout"; 
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { 
    events = "touchstart"; 
}; 

$('.circle').on(events,function(){ 
    if ($(this).hasClass("expanded")) { 
     // contract the circle 
     $(this).addClass("contracted").removeClass("expanded"); 
    } else { 
     // expand the circle 
     $(this).addClass("expanded").removeClass("contracted"); 
    }; 
});

現在將class contracted添加到您的所有圈子。

來源

2013-05-05 19:31:28 flavian

這裏是我的修改代碼：http://jsbin.com/adacot/13/edit任何想法，爲什麼它沒有「契約」如果我點擊它何時打開？ – michaelmcgurk 2013-05-05 19:37:20

感謝您的支持。你會推薦什麼我改變這個？ – michaelmcgurk 2013-05-05 19:40:56

謝謝先生。你可能會說，我對Javascript相當陌生。你能用我的jsbin代碼組裝一個例子嗎？ – michaelmcgurk 2013-05-05 19:49:44

我會嘗試使用jQuery切換：http://api.jquery.com/toggle-event/

$('.circle').toggle(function() { 
    $(this).addClass("expanded").removeClass("contracted"); 
}, function() { 
    $(this).removeClass("expanded").addClass("contracted"); 
});

來源

2013-05-05 19:32:35

感謝回覆，Vytautas。你能告訴我用我的代碼怎麼實現這個嗎？我應該改變我的HTML嗎？ – michaelmcgurk 2013-05-05 19:37:56

jQuery中簡單的onClick效果

回答

相關問題