单击选项卡上的jQuery调整窗口大小

jQuery resize window on tab click

本文关键字：jQuery 调整 窗口大小 选项 单击      更新时间：2023-09-26

我已经在Bootstrap选项卡中放置了一个jquery滑块，但除非调整窗口大小，否则该选项卡将不起作用。我猜这是因为它是在一个空容器中创建的，而不是在容器存在后激发的。

我试着在点击选项卡时触发窗口调整事件：

    $('#myTab a[href="#slider"]').click(function (e) {
      e.preventDefault()
      $(this).tab('show');
      jQuery(window).trigger('resize');
    $('.swiper-container').css('height','100%').css('width','100%');
    })

但它没有起作用。

JS Fiddle LINK

显示滑块选项卡后，调用Swiper函数。。 
    var isSliderActive = false;
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        if($(this).attr('href') == "#slider"){ 
            if(isSliderActive === false){ //If slider is not active 
                var mySwiper = new Swiper('.swiper-container',{
                    pagination: '.pagination',
                    paginationClickable: true
                });
            }
            isSliderActive = true;
       }    
    });

更新的jsFiddle

展开和collscapediv:

var open = false;
$('#SlideButton').click(function () {
    if (open === false) {
        $('#SlideContent').animate({ height: '650px' }, 600);
        $('#SlideContent').css('display', 'block');
        $(this).css('background-position', 'bottom left');
        open = true;
    }
    else {
        $('#SlideContent').animate({ height: '0' }, 600, function () {
            $('#SlideContent').css('display', 'none');
        });
        $(this).css('background-position', 'top left');
        open = false;
    }
});
相关文章：