jQuery 动态调整项目后，同位素未正确重新排列

Question

我有一个同位素布局，所有东西 - 排序和过滤以及一般显示 - 都很好用。但我必须让同位素项目在点击时可展开。我通过跨度 class 完成此操作，它在初始页面加载时通过 JavaScript 隐藏，但可以通过单击不同的跨度 class <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');

        });

jQuery 动态调整项目后，同位素未正确重新排列

jQuery Isotope doesn't rearrange properly after items have been dynamically adjusted

javascript

jquery

css

jquery-isotope

jquery-masonry