双击JQuery

Question

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

这是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才能接收到它。

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

Answer 2

尝试在第一次点击功能中return false

$(document).on('click', function(event){        
    $('.slideout-menu-toggle').on('click', function(event){
     //code here
    })
    return false;
})