Я создаю блог, в котором я хочу отображать только соответствующие изображения каждого поста в хорошо упорядоченной сетке с помощью масонства.Когда пользователь нажимает на изображение, текстовое содержимое блога будет показано под изображением (на той же странице).По какой-то причине скрытый контент не будет отображаться, когда я добавлю функцию щелчка.Я не очень знаком с обработчиком событий on () (требуется из-за масонства), и может быть что-то очевидное, что я пропускаю.Что происходит, я вижу в DOM, что элементы получают display: block, но они не отображаются.
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);
});