Простой эффект onClick в jQuery

Question

У меня очень простая веб-страница. Вот мой Demo.

Рабочий стол: Когда я наводил курсор на круг, он расширяется.

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"); 
});