javascript - 手机上的菜单不会消失

Question

在桌面上，我的功能在单击时出现，再单击时消失，但在移动设备上，点击菜单出现，再点击消失，但立即重新出现，为什么？感谢您的帮助

(function($) {
mobileMenu = function() {
    $('.btn-responsive-menu').on('click touchstart', function(e) {
        $("#menuleft").show();
        if ($("#menuleft").position().left == -17) {
            $("#menuleft").show().animate({
                left : "-400px"
            });
        } else {
            $("#menuleft").show().animate({
                left : "-17px"
            });
        }
    });
};
})(jQuery);

Answer 1

正如评论中提到的，您应该使用 css 类来制作动画。

(function($) {
    $('.btn-responsive-menu').on('click', function(e) {
        var $menu =  $("#menuleft");
        var openClass = '-isOpen';     
        $menu.toggleClass(openClass, !$menu.hasClass(openClass));
    });
})(jQuery);

#menuleft {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  background: gray;
  height: 100%;
  transform: translateX(-100%);
  transition: .4s ease;
}

#menuleft.-isOpen {
  transform: translateX(0);
}

.btn-responsive-menu {
  position: absolute;
  right: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-responsive-menu">toggle</button>
<div id="menuleft">
</div>