jQuery同位素在动态调整项目后不能正确重新排列

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

本文关键字：新排列 排列 不能 同位素 动态 调整 项目 jQuery      更新时间：2023-09-26

我有一个同位素布局和一切-排序和过滤和一般显示-工作得很好。但我必须让同位素物品在点击时可扩展。我通过一个span类来实现这一点，这个span类在初始页面加载时通过JavaScript隐藏，但可以通过点击另一个span类<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/

你的问题是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');
        });
相关文章：