Jquery检测调整浏览器大小和tabSlideOut插件

我正在使用tabSlideOut plugin（），除了调整浏览器的大小外，它还非常有效。代码基本上会在“文档准备就绪”和“浏览器调整大小”时检查浏览器大小，以确定是否应显示该选项卡。但是，在“调整大小”按钮上，选项卡无法正常工作，单击时会多次滑入滑出。有人能帮忙吗

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

函数doMenu（）{
变量宽度=$（窗口）.width（）；
如果（宽度<530）{
$（'.slide out div'）.tab滑出({
tabHandle:“.handle”，
pathToTabImage:null，
imageHeight:null，
imageWidth:null，
位置：'对'，
速度:300,，
操作：'单击'，
托普斯：“0”，
leftPos:'20px'，
固定位置：false，
toogleHandle:false
});
}
}
$（文件）.ready（doMenu）；
$（窗口）。调整大小（doMenu）；

您可能多次初始化

选项卡滑出

插件-每次调整浏览器窗口的大小时，它都会添加一个新的

单击

处理程序来运行滑动动画。 尝试以下方法：

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

var menuInitialized=false；
var handle=null；
函数doMenu（）{
if（句柄===null）{
句柄=$（“.handle”）；
}
变量宽度=$（窗口）.width（）；
如果（宽度<530）{
如果（！menuInitialized）{
//只调用$.tabSlideOut一次
menuInitialized=true；
$（'.slide out div'）.tab滑出({
tabHandle:“.handle”，
pathToTabImage:null，
imageHeight:null，
imageWidth:null，
位置：'对'，
速度:300,，
操作：'单击'，
托普斯：“0”，
leftPos:'20px'，
固定位置：false，
toogleHandle:false
});
}
handle.show（）；
}否则{
handle.hide（）；
}
}
$（文件）.ready（doMenu）；
$（窗口）。调整大小（doMenu）；

嗨，谢谢你的回答。这适用于文档准备，但不适用于浏览器调整大小，它看起来不像是在初始化标签菜单，除非我不知何故误解了你，它确实有效。我已经创建了一个小提琴来测试：-你可以调整右栏的大小。如果在该事件期间，窗口宽度小于530px（且仅初始化一次），则在

ready

和

resize

上对其进行初始化；相应地显示/隐藏句柄（当>=530px时隐藏，当<530px时显示）。不知道为什么它不适用于我的项目。当浏览器大小调整为<530时，将显示整个滑出div，单击手柄也不会将其关闭。我想这将是我的CSS。