布局/砌体 - 延迟布局调整 - 一键后面 [英] layout / masonry - delayed layout adjustment - one click behind

问题描述

好的，这就是问题
https://jsfiddle.net/yq7f1a63/1/

这是我的代码：

$(function () {
 $('.content').hide();
 $('a.read').click(function () {

     $(this).parent('.excerpt').hide();
     $(this).closest('li').find('.content').slideDown('fast');
     $('ul').masonry('layout');
     return false;
 });
 $('a.read-less').click(function () {

     $(this).parent('.content').slideUp('fast');
     $(this).closest('li').find('.excerpt').show();
     $('ul').masonry('layout');
     return false;       
 });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

我有几个带有文字的砖石项目。当点击阅读更多时，它会显示更多文本（交换.excerpt为.content）。

I have several masonry items with text inside. When clicking 'read more' it reveals more text (swaps .excerpt for .content).

我在使用布局方法调整每个项目时的网格透露更多，但由于某种原因，它只落后一次。所以例如我点击了第一个项目的更多内容并且它出错了，但是我点击了下一个项目的更多内容并且它调整到第一个项目布局应该是什么，等等！

I am using the layout method to adjust the grid when each item is clicked to reveal more, but for some reason it's one click behind. So for example I click read more on the first item and it goes wrong, but then I click read more for the next item and it adjusts to what the first item layout should have been, and so on!

任何人的想法？！在此先感谢： - ）

Any ideas people?! Thanks in advance :-)

推荐答案

您需要在slideDown（）或slideUp（）完成后调整网格。因此，将该代码添加到其完整的回调函数中。

You need to adjust the grid after slideDown() or slideUp() finishes. So, add that code to their complete callback functions.

$(function () {
     $('.content').hide();
     $('a.read').click(function () {

         $(this).parent('.excerpt').hide();
         $(this).closest('li').find('.content').slideDown('fast',function(){
            $('ul').masonry('layout');
         });         
         return false;
     });
     $('a.read-less').click(function () {

         $(this).parent('.content').slideUp('fast',function(){
            $(this).closest('li').find('.excerpt').show();
            $('ul').masonry('layout');
         });         
         return false;       
     });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

JSFiddle： https://jsfiddle.net/yq7f1a63/2/

JSFiddle: https://jsfiddle.net/yq7f1a63/2/

这篇关于布局/砌体 - 延迟布局调整 - 一键后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！