Javascript 绑定单击切换到图像,而不是砌体中的整个div
我使用砌体来切换div的高度和宽度。我在扩展div的内部有链接,我不知道如何使其仅在单击图像而不是在div内的任何位置时才切换高度/宽度 jQuery:Javascript 绑定单击切换到图像,而不是砌体中的整个div,javascript,jquery,html,jquery-masonry,masonry,Javascript,Jquery,Html,Jquery Masonry,Masonry,我使用砌体来切换div的高度和宽度。我在扩展div的内部有链接,我不知道如何使其仅在单击图像而不是在div内的任何位置时才切换高度/宽度 jQuery: var $container = $('.masonry').masonry({ columnWidth: 145, itemSelector: '.item', "isFitWidth": true }); $container.on('click', '.item-content', function(){
var $container = $('.masonry').masonry({
columnWidth: 145,
itemSelector: '.item',
"isFitWidth": true
});
$container.on('click', '.item-content', function(){
$(this).parent('.item').toggleClass('is-expanded');
$container.masonry();
});
内容循环WordPress:
<div class="masonry">
<?php while ($cpts->have_posts()) : $cpts->the_post();
echo '<li class="item ';
$cats = get_the_terms($post->ID, 'item_category');
foreach($cats as $cat){
echo 'ff-item-type-'.$cat->term_id.' ';
}
echo '">';
?>
<div class="item-content">
<p class="filter-img" data-id="<?php echo $post->ID; ?>"><?php the_post_thumbnail(); ?></p>
<?php echo wp_get_attachment_image(get_field('website_image'), array(135,135), false, array('class'=>'site-img')); ?>
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
</div>
</li>
<? endwhile; ?>
</div>
尝试申请部门报价MDN:
没有
元素永远不是鼠标事件的目标;但是,如果子体的指针事件设置为其他值,则鼠标事件可能以其子体元素为目标。在这些情况下,在事件捕获/气泡阶段,鼠标事件将在往返子代的途中触发此父元素上的事件侦听器(视情况而定)
更新
假设容器div具有class.mashing,请在css中添加以下内容
.masonry{
pointer-events:none;
}
这样,以容器div作为目标不会触发click事件,只有可单击的子元素才会触发click事件…而不是$container。在JS的“click”部分,我使用了以下内容:
$('.item-content .filter-img img').on('click', function(){
$(this).closest('.item').toggleClass('is-expanded');
$container.masonry();
});
通过这种方式,它在单击事件中使用正确的项,然后将类添加到正确的div。不起作用。你有什么例子吗?为了使这成为一个完整的问题,你可能应该提到,然后你需要将特定元素的css设置为指针事件:all。此外,当div中有链接时,这也没有帮助。如果我将其设置为指针事件:all,则链接可以工作,但仍然会关闭div。这到底是什么意思?可以单击div中的任何位置并打开和关闭它。我只想在div内的一个特定区域打开和关闭它。