jQuery Isotope插件 - ReLayout

Ash*_*Ash 3 jquery jquery-masonry jquery-isotope

我正在使用WordPress帖子的jQuery Isotope插件.我想在页面加载时显示帖子摘录,然后通过简单地扩展div的高度来显示点击的整个帖子.但是,Isotope插件会在用户单击"Read More"按钮以展开页面之前计算div高度,因此新高度会破坏插件.

我正在玩reLayout方法,但还没有想出来......任何想法?

这是一个有效的链接.尝试"草莓"帖子.http://ashlinixon.com/new-test/index.html

此外,代码示例:

HTML:

<article class="item">
    <div class="featured-img"><img src="images/strawberries.jpg" alt="Strawberries" /></div>
    <h2>Strawberries</h2>
    <p class="excerpt">Lorem ipsum dolor sit amet</p>
    <p class="read-more">Read more</p>
    <div class="post">
        test test<br />test test<br />test test
    </div>
</article>
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$(document).ready(function(){
    $(".post").hide();
    $(".excerpt").show();

    $('.read-more').click(function(){
        $(".post").slideToggle();
        $("#portfolio").isotope( 'reLayout' );
    });            
});
Run Code Online (Sandbox Code Playgroud)

谢谢!:)

Ash*_*Ash 6

如果我使用toggle而不是slideToggle似乎工作正常.对我来说现在足够好了.:)

$(document).ready(function(){
  $(".post").hide();
  $(".excerpt").show();

  $('.read-more').click(function(){
      $(".post").toggle();
      $("#portfolio").isotope( 'reLayout' );
  });              
});
Run Code Online (Sandbox Code Playgroud)