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

Question

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

这是我的代码:

$( "#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 元素(heh.catbutt.):

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

您仍然需要关闭它。这是一个具有三个阶段的 fiddle ...第一个是按钮展开，第二个是菜单展开，第三个是按钮和菜单折叠:https://jsfiddle.net/wcvg3nby/

这是来自 Fiddle 的相关代码:

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