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

正如您从代码和 documentation 中看到的那样悬停有两个功能/处理程序。

$(selector).hover(handlerIn, handlerOut)

为了将此更改为只有一个的点击，您需要“模拟”悬停的两种状态。

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

});

这段代码可以进一步优化，但你明白了。