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

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

1 个答案: