0
我有下面的代码。它滑动一个手机菜单,具有超时功能,只允许在500毫秒内点击以防止过度点击。当用户在菜单区域外单击时,它也会关闭。脚本底部的这两个函数是相互冲突的。这只发生在特殊情况下的响应网站上 - 如果我在第一页加载菜单区域外点击移动菜单时仍然隐藏,然后缩小浏览器窗口,菜单显示为已滑入。setTimeout和点击元素检测之外的冲突
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前叉:http://codepen.io/anon/pen/GvAle
为什么你绑定相同的回调相同的元素? – 2014-10-08 17:57:20
我自己并没有真正开发这部分代码。这是一个人的建议。如果你能帮助重组它,我愿意接受。 – 2014-10-08 18:15:24
那么,对我来说这段代码运行良好。你的意思是“冲突”? – 2014-10-08 18:26:00