Question

我有同位素布局，一切 - 排序和过滤以及一般显示 - 效果很好。但我必须使同位素项目在点击时可扩展。我通过在初始页面加载时通过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/

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 Isotope不能正确重新排列

1 个答案: