javascript - 动态调整元素后，jQuery Isotope 无法正确重新排列

Question

我有一个同位素布局，所有东西 - 排序和过滤以及一般显示 - 都很好用。但我必须让同位素元素在点击时可展开。我通过跨度类完成此操作，该类在初始页面加载时通过 JavaScript 隐藏，但可以通过单击不同的跨度类来切换 <span class='Point'> .

这在一定程度上起作用:文本是可切换的 - 但布局不会在单击时调整大小，尽管我包括 .isotope('layout') .具体的 jQuery 代码如下:

   $(".risknotes").hide(); $grid.on( 'click', '.Point', function() {
    $(this).parent().find(".risknotes").toggle(2000);
    $(this).parent().toggleClass('bigger');
     $grid.isotope('layout')
    });

有趣的是:如果我单击过滤器或排序按钮，所有内容都会完美调整大小。只是不在初始加载或点击。我制作了一个重现问题的 jsfiddle:http://jsfiddle.net/3t2fk5aq/

Answer 1

你的问题是 jquery 需要时间来完成切换 .ricknotes 但同位素立即重新布局。 您可以使用 .toggle() 的 complete 选项像这样处理它:

$grid.on('click', '.Point', function() {
            $(this)
                .parent()
                .find(".risknotes")
                .toggle({ duration: 200,complete: function(){ $grid.isotope('layout') } });
            $(this)
                .parent()
                .toggleClass('bigger');

        });