Question

我在一个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小提琴LINK

Answer 1

显示滑块选项卡后调用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

Answer 2

展开和collscape div：

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

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

2 个答案: