在jQuery中簡單的onClick效果

Question

我有一個非常簡單的網頁。 這是我的演示 。

桌面：當我將鼠標懸停在圓圈上時，它會展開。

iPad：當我點擊圓圈時，它會展開。

但是，是否有可能（在iPad上）當圓圈處於“擴展”狀態時，如果我再次點擊它，它會收縮嗎？

我如何使用現有代碼執行此操作？

使用Javascript：

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

非常感謝您對此的任何幫助。

Answer 1

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添加到您的所有圈子中。

Answer 2

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

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