同位素过滤器和自举式手风琴如何工作?

时间:2019-06-29 10:29:34

标签: isotope

我正在尝试使用同位素js过滤器,其中每个可过滤的项目内部都有一个bootstrap 3.3.7手风琴。效果很好,但是单击任何手风琴项目时,就会出现一个滑动错误。这是错误https://codepen.io/paulhaem/pen/ZJELJr

的示例

如您所见,单击任何项​​目后,它都会先向下滑动,但下一个项目会稍稍向下滑动。有什么办法可以解决这个问题?

        // init Isotope
    var $grid = $('.portfolio-grid').isotope({
        itemSelector: '.portfolio-item',
        layoutMode: 'vertical', 
        hiddenStyle: {
            opacity: 0
        },
        visibleStyle: {
            opacity: 1
        },

    });

    $grid.on('shown.bs.collapse hidden.bs.collapse', function() {
        $(this).slideDown(
            function() {
                $grid.isotope('layout');    
            }

        );
    });


    // filter items on button click
    $('.button-group').on( 'click', 'button', function() {
      var filterValue = $(this).attr('data-filter');
      $grid.isotope({ filter: filterValue });
    });

    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });

0 个答案:

没有答案