javascript - 双击 JQuery

Question

在这方面遇到了一些麻烦。所以我的公司想要应用程序的左抽屉菜单。具体来说，菜单的控件也附加在每一行中。即每一行都有单独的订单号和附加的操作按钮。单击“操作”按钮时，抽屉会打开以执行各种操作。现在的问题是，第一次且只有第一次点击需要两次点击。单击可以在页面上的任何位置。需要第二次单击才能激活抽屉。 2 次点击后关闭，再次点击顺利打开。那么为什么前 2 次点击？

这是 Jquery:

$(document).ready(function() {
    $(document).on('click', function(event){    
        $('.slideout-menu-toggle').on('click', function(event){
            $('.slideout-menu-toggle').unbind();
            event.preventDefault();
            // create menu variables
            var slideoutMenu = $('body');
            var slideoutMenuWidth = $('.slideout-menu').width();

            // toggle open class
            slideoutMenu.toggleClass("open");

            // slide menu
            if (slideoutMenu.hasClass("open")) {
                slideoutMenu.animate({
                    left: "0px"
                }); 
            } else {
                slideoutMenu.animate({
                    left: -slideoutMenuWidth
                }, 278);

            }
        });
    }); 
});

Answer 1

第一次点击需要发生，以便 .slide-menu-toggle 接收它的绑定(bind)。

...
$(document).on('click', function(event){    // first click
    $('.slideout-menu-toggle').on('click', function(event){ // menu click added
...