砌体和jQuery内容切换(slideDown,show等)

我正在建立一个博客,我只希望使用Masonry在一个排列整齐的网格中显示每篇博文的相关图像.当用户点击图像时,博客文本内容将显示在图像下方(在同一页面上).由于某种原因,当我添加点击功能时,隐藏的内容将不会显示.我不熟悉on()事件处理程序(因为Masonry而需要)并且可能有一些我不知道的东西.发生的事情是我在DOM中看到元素得到显示：阻止,但它们没有出现.

HTML –

<?php get_header(); ?>
        <div id="posts" class="clearfix">
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <div class="post">
                <a class="view" href="#"><?php the_post_thumbnail(465, 999) ?></a>
                <div class="overlay">+</div>
                <article>
                    <a href="#" class="close">x</a>
                    <h1><?php the_title() ?></h1>
                    <hr>
                    <?php the_content() ?>
                    <span><?php the_date('Y/d/m') ?></span>
                </article>
            </div>
        <?php endwhile; endif;  ?>
        </div>
        <div class="navigation">
            <?php next_posts_link(); ?>
        </div>
<?php get_footer(); ?>

JavasScript –

var $container = $('#posts');

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.post',
            columnWidth: 475,
            isAnimated: true
        });
    });

    $(document).on("click", "a.view", function(){
        if(!$(this).parent().find('article').is(':visible')){
            $(this).parent().find('article').slideDown(250);
        }
        else {
            $(this).parent().find('article').slideUp(250);
        }
        e.preventDefault();
    });

    $(document).on("mouseover", "a.view", function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 1 }, 250);
    });
    $(document).on("mouseout", "a.view", function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 0 }, 250);
    });

看看你的网站,我相信你的问题是,当你运行.masonry()并将所有元素设置为position：absolute时,砌体正在计算大小和位置,然后当你展开文本时,它将被项目隐藏下面…

因此,您需要在展开项目后“更新”masonry().我不知道插件那么好,但也许是$(‘#posts’).masonry(‘reload’);会做的伎俩:)！