javascript - 在内容交换 js 中触发同位素重新布局

Question

我有这个简单的内容交换脚本:

$(function(){

function contentSwitcher(settings){
    var settings = {
       contentClass : '.project-view',
       navigationId : '#projects-nav'
    };

    //Hide all of the content except the first one on the nav
    $(settings.contentClass).not(':first').hide();
    $(settings.navigationId).find('li:first').addClass('active');

    //onClick set the active state, 
    //hide the content panels and show the correct one
    $(settings.navigationId).find('a').click(function(e){
        var contentToShow = $(this).attr('href');
        contentToShow = $(contentToShow);

        //dissable normal link behaviour
        e.preventDefault();

        //set the proper active class for active state css
        $(settings.navigationId).find('li').removeClass('active');
        $(this).parent('li').addClass('active');

        //hide the old content and show the new
        $(settings.contentClass).hide();
        contentToShow.show();

        $container.isotope('reLayout');

    });
}
contentSwitcher();

});

我正在尝试在其中添加同位素重新布局的触发器

$container.isotope('reLayout');

但我似乎无法触发它。第一个选项卡加载正常，但第二个选项卡全部折叠。我做错了什么？

Answer 1

JSFiddle 将有助于排除故障。看起来您可能正在使用已弃用的 Isotope 函数 - 新版本的 Isotope 将“reLayout”选项更改为“layout”。尝试改变

$container.isotope('reLayout');

...到...

$container.isotope('layout');