Question

我一直在使用jQuery Equal Column Heights来匹配我网站上的主要内容和侧边栏，没有任何问题。更重要的是，我有一个成员目录，每个人都有一个“更多信息”按钮，使用toggle（）来扩展div并显示更多信息。单击此按钮时，我还会触发equalHeightColumns（）函数来调整扩展div的列。再次，这是有效的。

我已添加Isotope来过滤此成员目录。它工作正常，但是当我点击“更多信息”按钮时，不再调用equalHeightColumns（）函数。没有错误出现。

我的toggle（），equalHeightColumns（）代码：

    $(document).delegate('.toggle', 'click', function(){

    // get the sibling node with class 'hidden-info'
    var mysection = $(this).prev('.hidden-info');
    mysection.toggle('fast');
        $(this).html($(this).html() == '<td>LESS INFO</td>' ? '<td>MORE INFO</td>' : '<td>LESS INFO</td>');

    var fullbio = $(this).parent().parent().prev('.hidden-bio');
    fullbio.toggle();

    var partialbio = $(this).parent().parent().prev().prev('.hidden-bio');
    partialbio.toggle();

    if ( $(window).innerWidth() > 800) {
    $('#content, #sidebar, #content-sidebar-wrap').css('height' , 'auto');
    $("#content, #sidebar, #content-sidebar-wrap").equalHeightColumns();
    }

   else {
    $('#content, #sidebar, #content-sidebar-wrap').css('height' , 'auto');
   }

});

我的同位素代码：

$(window).load(function(){
var $container = $('.professionContainer');
$container.isotope({
    transformsEnabled: false,
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
    }
});

$('.professionFilter a').click(function(){
    $('.professionFilter .current').removeClass('current');
    $(this).addClass('current');

    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
     });
     return false;
});
});

如果您需要任何其他信息，请与我们联系。

感谢。

编辑：我意识到如果我第二次点击链接会触发equalHeightColumns函数。

Answer 1

我明白了：在调整列之前，我需要在切换条目后展开Isotope容器。所以在函数中，我添加了

$container.isotope('reLayout');

在致电.equalHeightColumns();

之前

jQuery Isotope打破了jQuery Equal Column Heights

1 个答案: