Question

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

如果我激活JS以使菜单有效，那么CSS不会再触摸动画，如果我取消激活菜单，它就会起作用。错误必须在JS中，但我不明白为什么这应该在触摸时去除CSS动画。

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

以及此处的触摸工作版本：http://www.cphrecmedia.dk/musikdk/mobile2/

按钮的HTML是：

＆＃13;

 <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>

＆＃13;

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

＆＃13;

我没有把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似乎是正确的。

Answer 2

提供您的标签ID或类，并实际附加点击。不是一个完整的div。因为会发生什么，你点击div，所以你的CSS按钮动画永远不会发生。或者您需要在点击事件中触发该动画。

<label for="click" id="burgerLabel">
<span class="burger"></span>
</label>

$('#burgerLabel').on('click', function(e) {

CSS未在菜单中触发两次

2 个答案: