Jquery bxSlider-隐藏（显示：无）滑块在调整浏览器大小时中断

我对bxSlider有一个问题，如果我调整浏览器的大小，然后导航到另一个滑块（隐藏所有其他滑块并显示单击的滑块菜单（使用灰色导航栏）），则当您尝试查看它们时，所有隐藏的滑块都会崩溃

仅供参考：最初我让所有滑块都可见，因此它们都初始化/加载，然后一旦用户使用灰色菜单选择另一个滑块，我将隐藏所有其他滑块并显示他们想要的滑块

请参见此处的示例：

所以这个过程是 1.加载页 2.单击“应用程序” 3.调整浏览器大小 4.单击“具有类似功能的产品”- 该滑块现在应该与所有其他隐藏滑块一起被破坏

谁能解释一下这个问题吗？我似乎不明白为什么我的浏览器即使稍微调整一下大小，也会破坏所有隐藏的内容。我确定浏览器在调整大小时会做什么/触发什么，但我的BxSlider似乎受到了影响。我在Chrome、Safari、Firefox和Opera中看到了这个错误

非常感谢

p、 我肯定这和我的标记有关，但我就是搞不懂

编辑：

HTML:

脚本：

$(window).load(function() {

//Grab the width of all .cat-nav a elements(including padding) 
//then half that value and store it in halfWidth[ ]
var halfWidth =[];
 $('.cat-nav a').each(function(index, element) {
halfWidth.push($(this).outerWidth(true) / 2);
});



//Use .position to find the left hand edge position of each .cat-nav a element
//then add half the width of each .cat-nav a element to find the centre(left:?px) of each
//of the .cat-nav a elements. Store them in an array for animating the pointer to
// - 7 value reduces location by half of the width of the pointer to make sure the pointer 
//sits centrally
var finalPositions = [];
$('.cat-nav a').each(function(index, element) {
    var positionNew = $(this).position();
    finalPositions.push((positionNew.left + halfWidth[index]) - 7);
});

$('.pointer').css('left',finalPositions[0]).show();


function checkPHeights(){
$('.slider1 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});

$('.slider2 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});

$('.slider3 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');

     }
});

$('.slider4 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});
}

checkPHeights();

//animate pointer to relevant category element

$('.cat-nav a').click(function() {

    $('.cat-nav a').removeClass('active');
    $(this).addClass('active');
    var indx = $(this).index(); 
    if (indx == 1) {/*hideSlider(2);*/ $('.slider-wrap-2,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-1').fadeIn(300).addClass('current');}
    if (indx == 2) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-2').fadeIn(300).addClass('current');}
    if (indx == 3) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-3').fadeIn(300).addClass('current');}
    if (indx == 4) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-3').fadeOut(300).removeClass('current'); $('.slider-wrap-4').fadeIn(300).addClass('current');}

    var catIndex = ($(this).index() - 1);
    $('.pointer').animate({left:finalPositions[catIndex]},800);
});


});

$(document).ready(function() {


var slider1 = $('.slider1').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
    infiniteLoop: false,
    slideMargin: 12
      });

var slider2 = $('.slider2').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
 });

var slider3 = $('.slider3').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
 });

var slider4 = $('.slider4').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
});

$('.bx-pager.bx-default-pager').each(function(index, element) {
    var sliderWrapIndex = index + 1;
    var pagerLength = $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager > div').length;
    if ( pagerLength < 2 ) {
        $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager').hide();
    }

});



$('.hide').click(function(e) {
    $('.slider-wrap-2').fadeOut(1000);
});

$('.show').click(function(e) {
    $('.slider-wrap-2').fadeIn(1000);
});

$（窗口）.load（函数（）{
//获取所有.cat导航a元素的宽度（包括填充）
//然后将该值减半，并将其存储在半宽[]
var半宽度=[]；
$（'.cat nav a'）。每个（函数（索引，元素）{
半宽度.push（$（this）.outerWidth（true）/2）；
});
//使用.position查找每个.cat导航a元件的左侧边缘位置
//然后添加每个.cat nav a元素宽度的一半，以找到每个元素的中心（左：？px）
//将它们存储在数组中，以便为指向的指针设置动画
//-7值将位置减少指针宽度的一半，以确保指针
//坐在中央
var finalPositions=[]；
$（'.cat nav a'）。每个（函数（索引，元素）{
var positionNew=$（this.position（）；
finalPositions.push（（positionNew.left+halfWidth[索引]）-7）；
});
$（'.pointer'）.css（'left'，finalPositions[0]）.show（）；
功能检查灯（）{
$（'.slider1.slide p'）。每个（函数（索引，元素）{
如果（$（此）.height（）>22）
{
$（this.css（'margin'，'-7px 0 10px 0'）；
}
});
$（'.slider2.slide p'）。每个（函数（索引，元素）{
如果（$（此）.height（）>22）
{
$（this.css（'margin'，'-7px 0 10px 0'）；
}
});
$（'.slider3.slide p'）。每个（函数（索引，元素）{
如果（$（此）.height（）>22）
{
$（this.css（'margin'，'-7px 0 10px 0'）；
}
});
$（'.slider4.slide p'）。每个（函数（索引，元素）{
如果（$（此）.height（）>22）
{
$（this.css（'margin'，'-7px 0 10px 0'）；
}
});
}
检查灯（）；
//设置指向相关类别元素的指针的动画
$（'.cat nav a'）。单击（函数（）{
$（'.cat nav a'）.removeClass（'active'）；
$（this.addClass（'active'）；
var indx=$（this.index（）；
if（indx==1）{/*hideSlider（2）；*/$（'.slider-wrap-2、.slider-wrap-3、.slider-wrap-4'）.fadeOut（300）.removeClass（'current'）；$（'.slider-wrap-1'）.fadeIn（300）.addClass（'current'）；}
if（indx==2）{/*hideSlider（1）；*/$（'.slider-wrap-1、.slider-wrap-3、.slider-wrap-4'）.fadeOut（300）.removeClass（'current'）；$（'.slider-wrap-2'）.fadeIn（300）.addClass（'current'）；}
if（indx==3）{/*hideSlider（1）；*/$（'.slider-wrap-1、.slider-wrap-2、.slider-wrap-4'）.fadeOut（300）.removeClass（'current'）；$（'.slider-wrap-3'）.fadeIn（300）.addClass（'current'）；}
if（indx==4）{/*hideSlider（1）；*/$（'.slider-wrap-1、.slider-wrap-2、.slider-wrap-3'）.fadeOut（300）.removeClass（'current'）；$（'.slider-wrap-4'）.fadeIn（300）.addClass（'current'）；}
var catIndex=（$（this）.index（）-1）；
$（'.pointer'）.animate（{left:finalPositions[catIndex]}，800）；
});
});
$（文档）.ready（函数（）{
变量slider1=$（'.slider1'）.bxSlider({
滑动宽度：175，
useCSS:false，
速度：1500，
onSlideBefore:function（）{
$（'.fade-l，.fade-r'）.show（）；
},
onSlideAfter:function（）{
$（'.fade-l，.fade-r'）.fadeOut（'fast'）；
},
米斯利德斯：1，
最大幻灯片数：5，
无穷远：错，
幻灯片摘要：12
});
var slider2=$（'.slider2'）.bxSlider({
滑动宽度：175，
useCSS:false，
速度：1500，
onSlideBefore:function（）{
$（'.fade-l，.fade-r'）.show（）；
},
onSlideAfter:function（）{
$（'.fade-l，.fade-r'）.fadeOut（'fast'）；
},
米斯利德斯：1，
最大幻灯片数：5，
无穷远：错，
幻灯片摘要：12
});
var slider3=$（'.slider3'）.bxSlider({
滑动宽度：175，
useCSS:false，
速度：1500，
onSlideBefore:function（）{
$（'.fade-l，.fade-r'）.show（）；
},
onSlideAfter:function（）{
$（'.fade-l，.fade-r'）.fadeOut（'fast'）；
},
米斯利德斯：1，
最大幻灯片数：5，
无穷远：错，
幻灯片摘要：12
});
var slider4=$（'.slider4'）.bxSlider({
滑动宽度：175，
useCSS:false，
速度：1500，
onSlideBefore:function（）{
$（'.fade-l，.fade-r'）.show（）；
},
onSlideAfter:function（）{
$（'.fade-l，.fade-r'）.fadeOut（'fast'）；
},
米斯利德斯：1，
最大幻灯片数：5，
无穷远：错，
幻灯片摘要：12
});
$（'.bx pager.bx default pager'）。每个（函数（索引，元素）{
var SliderRapindex=指数+1；
变量pagerLength=$（'.slider wrap-'+sliderRapindex+'.bx-pager.bx-de
$(window).load(function() {

//Grab the width of all .cat-nav a elements(including padding) 
//then half that value and store it in halfWidth[ ]
var halfWidth =[];
 $('.cat-nav a').each(function(index, element) {
halfWidth.push($(this).outerWidth(true) / 2);
});



//Use .position to find the left hand edge position of each .cat-nav a element
//then add half the width of each .cat-nav a element to find the centre(left:?px) of each
//of the .cat-nav a elements. Store them in an array for animating the pointer to
// - 7 value reduces location by half of the width of the pointer to make sure the pointer 
//sits centrally
var finalPositions = [];
$('.cat-nav a').each(function(index, element) {
    var positionNew = $(this).position();
    finalPositions.push((positionNew.left + halfWidth[index]) - 7);
});

$('.pointer').css('left',finalPositions[0]).show();


function checkPHeights(){
$('.slider1 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});

$('.slider2 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});

$('.slider3 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');

     }
});

$('.slider4 .slide p').each(function(index, element) {
    if ($(this).height() > 22)
    {
        $(this).css('margin','-7px 0 10px 0');
    }
});
}

checkPHeights();

//animate pointer to relevant category element

$('.cat-nav a').click(function() {

    $('.cat-nav a').removeClass('active');
    $(this).addClass('active');
    var indx = $(this).index(); 
    if (indx == 1) {/*hideSlider(2);*/ $('.slider-wrap-2,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-1').fadeIn(300).addClass('current');}
    if (indx == 2) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-3,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-2').fadeIn(300).addClass('current');}
    if (indx == 3) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-4').fadeOut(300).removeClass('current'); $('.slider-wrap-3').fadeIn(300).addClass('current');}
    if (indx == 4) {/*hideSlider(1);*/ $('.slider-wrap-1,.slider-wrap-2,.slider-wrap-3').fadeOut(300).removeClass('current'); $('.slider-wrap-4').fadeIn(300).addClass('current');}

    var catIndex = ($(this).index() - 1);
    $('.pointer').animate({left:finalPositions[catIndex]},800);
});


});

$(document).ready(function() {


var slider1 = $('.slider1').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
    infiniteLoop: false,
    slideMargin: 12
      });

var slider2 = $('.slider2').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
 });

var slider3 = $('.slider3').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
 });

var slider4 = $('.slider4').bxSlider({
    slideWidth: 175,
    useCSS: false,
    speed: 1500,
    onSlideBefore: function(){
            $('.fade-l, .fade-r ').show();
        },
    onSlideAfter: function(){
        $('.fade-l, .fade-r ').fadeOut('fast');
    },
    minSlides: 1,
    maxSlides: 5,
infiniteLoop: false,
    slideMargin: 12
});

$('.bx-pager.bx-default-pager').each(function(index, element) {
    var sliderWrapIndex = index + 1;
    var pagerLength = $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager > div').length;
    if ( pagerLength < 2 ) {
        $('.slider-wrap-' + sliderWrapIndex + ' .bx-pager.bx-default-pager').hide();
    }

});



$('.hide').click(function(e) {
    $('.slider-wrap-2').fadeOut(1000);
});

$('.show').click(function(e) {
    $('.slider-wrap-2').fadeIn(1000);
});