0

こんにちは皆さん、ここでコードを編集するのを手伝ってくれませんか。ホバー効果ではなく、効果をクリック可能にしたい。

http://isotope.metafizzy.co/custom-layout-modes/masonry-column-shift.html

これは現在のコードです:

$container.find('.shifty-item').hover(
  function() {
    $(this).css({ height: "+=100" });
    // note that element is passed in, not jQuery object
    $container.isotope( 'shiftColumnOfItem', this );
  },
  function() {
    $(this).css({ height: "-=100" });
    $container.isotope( 'shiftColumnOfItem', this );
  }
);

bind.('click', function) を使用しようとしましたが、機能しません。また、CSS クラスを追加しようとしましたが、それでも問題は解決しません。

4

1 に答える 1

1

コードとドキュメントからわかるように、ホバーには 2 つの関数/ハンドラーがあります。

$(selector).hover(handlerIn, handlerOut)

これを 1 つしかないクリックに変更するには、ホバーで 2 つの状態を「シミュレート」する必要があります。

$container.find('.shifty-item').click(function({
    if($(this).hasClass('active'))
    {
        $(this).css({ height: "-=100" });
        $container.isotope( 'shiftColumnOfItem', this );
        $(this).addClass('active');
    }
    else
    {
        $(this).css({ height: "+=100" });
        $container.isotope( 'shiftColumnOfItem', this );
        $(this).removeClass('active');
    }

});

このコードはさらに最適化できますが、要点はわかります。

于 2013-04-26T07:27:42.480 に答える