我正在尝试构建移动幻灯片菜单,并希望在移动设备上添加幻灯片效果的.on("swipeleft",...)
功能。然而,我遇到的问题是当用户将菜单滑回时它会卡住并重复该功能,因为它回顾mobileMenuSlideIn()
。这意味着用户需要两次单击按钮。我要做的是检查函数是否被调用,如果不重复它。我怎么能这样做?
function mobileMenu(){
/* Slide out function */
function mobileMenuSlideOut(){
jQuery('.mobile-wrapper').animate({ marginLeft: "70%" }, 'slow', function() {
jQuery(".mobile-wrapper").css("position", "fixed");
});
jQuery('.mobile-wrapper-sidebar').animate({ marginLeft: "0px" }, 'slow');
}
/* Slide int function */
function mobileMenuSlideIn(){
jQuery('.mobile-wrapper').animate({ marginLeft: "0px" }, 'slow', function() {
jQuery(".mobile-wrapper").css("position", "relative");
});
jQuery('.mobile-wrapper-sidebar').animate({ marginLeft: "-70%" }, 'slow');
}
/* Toggle to create mobile menu */
jQuery('[data-toggle="mobile-wrapper"]').toggle(
/* Add the swipe function for mobile */
function() {
mobileMenuSlideOut();
jQuery( ".mobile-wrapper" ).on("swipeleft", function() {
mobileMenuSlideIn();
});
},
function() {
if ( !mobileMenuSlideIn()) {
mobileMenuSlideIn();
}
else {
//do nothing
}
}
);