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

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

@H_301_7@HTML –

@H_301_7@

<?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(); ?>

@H_301_7@JavasScript –

@H_301_7@

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",function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 1 },250);
    });
    $(document).on("mouSEOut",function(){
      $(this).parent().find('.overlay').stop().animate({ opacity: 0 },250);
    });