砌體柱移位調整

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

}); 

此代碼可以進一步優化，但你明白了。