0

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>
4

2 に答える 2

0

$container.on('click')JSのセクションの代わりに、これを使用しました。

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

このようにして、クリックイベントで正しいアイテムを使用し、クラスを正しい div に追加します。

于 2014-04-23T18:57:35.733 に答える
0

pointer-events:nonedivに応募してみてください。MDN の引用:

なし

要素がマウス イベントのターゲットになることはありません。ただし、マウス イベントは、その子孫要素に別の値が設定されたポインター イベントがある場合、その子孫要素をターゲットにすることがあります。このような状況では、マウス イベントは、イベント キャプチャ/バブル フェーズ中に子孫に出入りする途中で、この親要素のイベント リスナーを適切にトリガーします。

アップデート

コンテナ div に class があると仮定して.masonry、css に以下を追加します。

.masonry{
 pointer-events:none;
}

そうすることで、コンテナ div をターゲットとして持つクリック イベントはトリガーされず、クリック可能な子要素のみがクリック イベントをトリガーします...

于 2014-04-22T18:06:38.710 に答える