jquery - 菜单中的 CSS 未触发两次

Question

我正在为我们的移动版本实现一个完全 CSS 动画的汉堡包图标，它看起来非常整洁。然而，菜单(当然)是由这个图标触发的，它在这里开始不起作用。

如果我激活 JS 以使菜单正常工作，CSS 将不再在触摸时显示动画，如果我停用菜单，它就会正常工作。错误一定是在 JS 中，但我不明白为什么这应该删除触摸时的 CSS 动画。

您可以在此处查看菜单工作版本:http://www.cphrecmedia.dk/musikdk/mobile/

这里是触控版本:http://www.cphrecmedia.dk/musikdk/mobile2/

按钮的 HTML 是:

 <script>
  $(document).ready(function() {
  
  function opensLeft() {
    closesRight()
    $("#sl").addClass('visible')
    $("#swipe").addClass('isOpenLeft');
  }
  
  function closesLeft() {
    $("#sl").removeClass('visible')
    $("#swipe").removeClass('isOpenLeft');
  }

  function opensRight() {
    closesLeft()
    $("#sr").addClass('visible')
    $("#swipe").addClass('isOpenRight');
  }
  
  function closesRight() {
    $("#sr").removeClass('visible')
    $("#swipe").removeClass('isOpenRight');
  }

  
  $('.mcwrap').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    
    if($('#swipe').hasClass('isOpenLeft')) {
      closesLeft();
    } else {
      opensLeft();
    }
    
  });

  $('#menubtn-right').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    
    if($('#swipe').hasClass('isOpenRight')) {
      closesRight();
    } else {
      opensRight();
    }
    
  });
  
});
</script>

<div class="mcwrap">
  <input id="click" name="exit" type="checkbox" />
  <label for="click"><span class="burger"></span></label>		
</div>	

我已经很长时间没有插入 CSS 了，但如果需要的话请告诉我。

Answer 1

非工作版本似乎在两个不存在的元素上寻找 click 事件。第一个是 #menubtn-right，第二个是 .mcwra。处理程序调用此函数:

$('#menubtn-right').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();

    if($('#swipe').hasClass('isOpenRight')) {
      closesRight();
    } else {
      opensRight();
    }        
  });

而工作版本将点击处理程序附加到 .mcwrap，这看起来是正确的。