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);