如何停止在同一对象上触发'tap'事件

Question

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

这是我的代码：

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

Answer 1

也许是这样的，你检查#catbutt元素的左侧位置，如果它已经是 0px，滑出#categories元素，否则，只需滑出#catbutt元素(呵呵。

$( "#catbutt" ).on("tap",function(e) {
  if($(this).css('left') == '0px') {
    $( "#categories" ).animate({left: "0px"});
  }
  else {
    $(this).animate({left: "0px"}, 300, 'swing');
  }
});

你仍然必须让它关闭，也是。这是一个小提琴，它有三个阶段...第一个是按钮展开，第二个是菜单展开，第三个是按钮和菜单折叠：https://jsfiddle.net/wcvg3nby/

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

.CSS

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

.HTML

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

.JS

$('#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'});
  }
});