Javascript 如何停止'；轻触'；在同一对象上触发事件

我有一个问题需要帮助，因为我对Jquery有点陌生，我有一个按钮，它半隐藏在屏幕的左侧，还有一个菜单，它也完全隐藏在左侧，我试图实现的是，在移动设备上，用户将“点击”按钮，该按钮将从侧面滑动，以显示完整的按钮，然后您将再次点击该按钮，然后将菜单从左侧的隐藏位置滑出。我遇到的问题是，无论我采取哪种方法，每当我点击半隐藏按钮时，它都会滑出，但随后菜单会直接滑出，而无需再次点击按钮，因此，如果你们中的任何人能为我指出正确的方向，我将非常感谢

这是我的密码：

$( "#catbutt" ).on("tap",function(e) {
    $( "#catbutt" ).animate({left: "0px"},300,'swing');
});

$( "#catbutt" ).on("tap",function(e) {
    $( "#categories" ).animate({left: "0px"});
});

---

可能是这样的，检查

#catbutt

元素的左位置，如果已经是0px，则滑出

#categories

元素，否则，只需滑出

#catbutt

元素（呵呵，catbutt.）：

你还得把它关上。这里有一把小提琴有三个阶段。。。第一个是按钮展开，第二个是菜单展开，第三个是按钮和菜单折叠：

以下是小提琴上的相关代码：

CSS

HTML

第一类
第2类
第3类
第四类

JS

$（'catbutt'）。在（'click'，function（）上{
if（$（this）.offset（）.left<0）{
$（this.animate（{'left'：'0px'}）；
}
else if（$（this）.offset（）.left==0）{
$（this.animate（{left:'100px'}）；
$（'#categories'）。动画（{left:'0px'}）；
}
否则{
$（this.animate（{left:'-80px'}）；
$（#categories'）.animate（{left:'-100px'}）；
}
});

IIRC，两者中的代码将同时启动…请分享您的HTML和CSS！您有两个不同的任务要在不同的时间执行，在

点击
。1） 显示完整按钮。2） 滑动菜单发布一篇文章，以便我们可以帮助您定义条件。-正如@JackBashford所说，两个处理程序都在对每个
tap
事件进行处理。。。非常感谢你，马克，这完全符合我的要求，答案很简单但却很有效，我怎么看不出来呢lol@AndyHowe没问题。如果你有机会把它作为公认的答案，我将不胜感激。回头见。
$( "#catbutt" ).on("tap",function(e) {
  if($(this).css('left') == '0px') {
    $( "#categories" ).animate({left: "0px"});
  }
  else {
    $(this).animate({left: "0px"}, 300, 'swing');
  }
});

#catbutt {
  width: 100px;
  height: 20px;
  position: fixed;
  left: -80px;
  background-color: red;
}

#categories {
  width: 100px;
  position: fixed;
  left: -100px;
}

<div id='catbutt'></div>

<div id='categories'>
  <div>Cat 1</div>
  <div>Cat 2</div>
  <div>Cat 3</div>
  <div>Cat 4</div>
</div>

$('#catbutt').on('click', function() {
    if($(this).offset().left < 0) {
    $(this).animate({'left':'0px'});
  }
  else if($(this).offset().left == 0) {
    $(this).animate({left: '100px'});
    $('#categories').animate({left: '0px'});
  }
  else {
    $(this).animate({left: '-80px'});
    $('#categories').animate({left: '-100px'});
  }
});