砌体柱移位调整

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（ '点击'，功能），但它不工作。还尝试添加一个CSS类，但这并不能解决问题ethier。

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

}); 

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