jquery - 砌体柱移位调整

Question

大家好，你能帮我在这里编辑代码吗？我希望效果是可点击的，而不是悬停效果。

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 类，但这并不能解决问题。

Answer 1

As you can see from the code and from the documentation hover has two functions/handlers.

$(selector).hover(handlerIn, handlerOut)

In order to change this to click, which only has one, you need to "simulate" the two states in hover.

$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');
    }

});

This code can be further optimized but you get the point.