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

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

1 个答案: