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

在jQuery中简单的onClick效果

2 个答案: