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

Posted 2023-02-23

【中文标题】Jquery 检测调整大小浏览器和 tabSlideOut 插件

【英文标题】：Jquery detect resize browser and tabSlideOut plugin

【发布时间】：2013-04-02 17:56:13

【问题描述】：

我正在使用 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);

【参考方案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);

【讨论】：

您好，感谢您的回答。这适用于文档准备好但不适用于浏览器调整大小，它看起来根本不像初始化选项卡菜单

除非我以某种方式误解了您，否则它确实有效。我创建了一个小提琴来测试：jsfiddle.net/Zmu5C - 你可以调整右列的大小。如果在该事件期间窗口的宽度小于 530 像素（并且仅初始化一次），它将在 ready 和 resize 上初始化；相应地显示/隐藏句柄（>= 530px 时隐藏，

想知道为什么它在我的项目上不起​​作用。当浏览器调整为