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类来做动画。

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

手机上的菜单不会消失

1 个答案: