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