jquery - jQuery检测调整大小浏览器和tabSlideOut插件

Question

我正在使用 tabSlideOut 插件 ( http://www.building58.com/examples/tabSlideOut.html )，除了我调整浏览器大小时，它的效果很好。该代码基本上检查文档准备好的浏览器大小和浏览器调整大小以确定是否应显示选项卡。但是，在调整大小时，选项卡无法正常工作，并且在单击时会多次滑入和滑出。有人可以帮忙吗？

function doMenu() {

    var width = $(window).width();

    if (width < 530) {


     $('.slide-out-div').tabSlideOut({
         tabHandle: '.handle',
         pathToTabImage: null,
         imageHeight: null,
         imageWidth: null,
         tabLocation: 'right',
         speed: 300,
         action: 'click',
         topPos: '0',
         leftPos: '20px',
         fixedPosition: false,
         toogleHandle: false
     });
   }

}
$(document).ready(doMenu);
$(window).resize(doMenu);

Answer 1

您可能tabSlideOut多次初始化插件 - 每次调整浏览器窗口大小时，它都会添加一个click运行滑动动画的新处理程序。尝试类似：

var menuInitialized = false;
var handle = null;
function doMenu() {
    if(handle === null) {
        handle = $(".handle");
    }
    var width = $(window).width();
    if (width < 530) {
        if(!menuInitialized) {
            //only call $.tabSlideOut once
            menuInitialized = true;
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',
                pathToTabImage: null,
                imageHeight: null,
                imageWidth: null,
                tabLocation: 'right',
                speed: 300,
                action: 'click',
                topPos: '0',
                leftPos: '20px',
                fixedPosition: false,
                toogleHandle: false
            });
        }
        handle.show();
   } else {
        handle.hide();
   }
}
$(document).ready(doMenu);
$(window).resize(doMenu);