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