jQuery中简单的onClick效果

Simple onClick effect in jQuery

本文关键字：onClick 效果 简单 jQuery      更新时间：2023-09-26

我有一个非常简单的网页这是我的Demo。

Desktop:当我将鼠标悬停在圆圈上时，它会展开

iPad:当我点击圆圈时，它会展开

然而，是否有可能(在iPad上)当圆圈处于"展开"状态时，如果我再次点击它，它会收缩?

我如何使用我现有的代码?

Javascript: 

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

非常感谢您的帮助

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

我会尝试使用jQuery toggle: http://api.jquery.com/toggle-event/

$('.circle').toggle(function() {
  $(this).addClass("expanded").removeClass("contracted");
}, function() {
  $(this).removeClass("expanded").addClass("contracted");
});
相关文章：