Question

我有以下代码。它可以滑动移动菜单，具有超时功能，只允许在500毫秒内点击，以防止过度点击。当用户在菜单区域外单击时，它也会关闭。脚本底部的这两个函数相互冲突。这只发生在特殊情况下的响应式网站上 - 如果我在移动菜单仍然隐藏的情况下在第一页加载时单击菜单区域外，然后缩小浏览器窗口，则菜单显示为已滑入。

var togglerWidth = jQuery('#mobile-menu-toggler').css('min-width'); //get width of toggler

//Slide left function
var slideLeft = function () {
    var menuWidth = jQuery('#mainmenu-mobile').width(); //get width of main menu
    jQuery('#mobile-menu-toggler').animate({
        width: menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    jQuery('#mainmenu-mobile').animate({
        right: "0px"
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback 
    });
}

//Slide Right Function
var slideRight = function () {
    var menuWidth = jQuery('#mainmenu-mobile').width(); //get width of main menu
    jQuery('#mobile-menu-toggler').animate({
        width: togglerWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback    
    });

    jQuery('#mainmenu-mobile').animate({
        right: -menuWidth
    }, // what property we are animating
    500, // how fast we are animating
    'swing', // the type of easing
    function () { // the callback     
    });
}

var activate = function () { //switch to 'active-menu' class
    jQuery('#mainmenu-mobile, #mobile-menu-toggler').addClass('active-menu');
}

var deactivate = function () { //switch back to 'inactive-menu' class
    jQuery('#mainmenu-mobile, #mobile-menu-toggler').removeClass('active-menu').addClass('inactive-menu');
}

jQuery("#mobile-menu-toggler").click(function () {
    jQuery("#mobile-menu-toggler").unbind('click');
    jQuery(this).toggleClass('inactive-menu');
    jQuery('#mainmenu-mobile').toggleClass('inactive-menu');
    jQuery("#mobile-menu-wrap").prop("disabled",true);
    if (jQuery(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }

//*************THIS FUNCTION HAS A CONFILCT WITH THE ONE BELOW****************
setTimeout(function(){setFunction()},500); //
});

var setFunction=function(){
jQuery("#mobile-menu-toggler").bind('click',function () {
    jQuery("#mobile-menu-toggler").unbind('click');
    jQuery(this).toggleClass('inactive-menu');
    jQuery('#mainmenu-mobile').toggleClass('inactive-menu');
    jQuery("#mobile-menu-wrap").prop("disabled",true);
    if (jQuery(this).hasClass('inactive-menu')) {
        slideRight();
        deactivate();
    } else {
        slideLeft();
        activate();
    }

setTimeout(function(){setFunction()},500); //
});
}

//*************THIS FUNCTION HAS A CONFILCT WITH THE ONE ABOVE****************
jQuery(document).mouseup(function (e) {
    var container = jQuery("#mobile-menu-wrap");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        slideRight();
        deactivate();
    }
});

CODEPEN FORK：http://codepen.io/anon/pen/GvAle

Answer 1

如果我是你，我可能已经完成了like this（仅举例）

setTimeout与元素检测外部单击之间的冲突

1 个答案: