Question

我正在使用Masonry来切换div的高度和宽度。我在扩展div中有链接，我无法弄清楚如何制作它，以便高度/宽度只在单击图像时切换，而不是在div内的任何位置。

jQuery：

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>

Answer 1

尝试将pointer-events:none应用于div。引用MDN：

<强>无

元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发送/来自后代的路径上触发此父元素上的事件侦听器。

更新

假设容器div具有类.masonry，请在css中添加以下内容

.masonry{
 pointer-events:none;
}

通过这样做，不会触发将容器div作为目标的点击事件，只有可点击的子元素才会触发点击事件......

Answer 2

而不是JS的$container.on('click')部分，我使用了这个：

$('.item-content .filter-img img').on('click', function(){
    $(this).closest('.item').toggleClass('is-expanded');
    $container.masonry();
});

这样它在click事件中使用了正确的项目，然后将该类添加到正确的div。

绑定单击切换到图像而不是整个div在砌体中

2 个答案: