砌体网格点击

Question

我正在使用砖石构建我想在点击时打开和关闭的产品部分。我已经添加了 onclick 但如您所见 http://fi-testing.co.uk/zeffire-web/products.html 它正在工作，但我遇到了一些问题。 1）它们都打开 onclick 而不是只打开相关的 2）它们在调整大小时不重新对齐（它们重叠） 3）我希望它们打开缓慢。

我已经尝试添加（仍在代码中）slideDown(600, masonryUpdate); 到 .item 函数以对缓慢的移动进行排序，并重新更新砌体，但这没有做任何事情。

这是完整的功能

$(document).ready(function(){
        $(".item").click(function(){
            $(".item").addClass("intro").slideDown(600, masonryUpdate);
        });
    });

我试过使用这个 http://masonry.desandro.com/appendix.html 但我是它的新手，所以不确定在哪里添加它，以使其与 'onclick' 部分对齐。

任何帮助将不胜感激？谢谢。

Answer 1

通过执行此操作

，您只需处理 click 事件处理程序 中被单击的元素

$(document).ready(function(){
    $(".item").click(function(){
        var a= $(this), b = a.parent();
        b.find(".intro").each(function(index){
           if(a !== $(this)) {
              // close this element since it's not the clicked one
              // $(this).slideUp() or $(this).addClass('close') if you have a custom class for closing elements
           }
        });
        a.addClass("intro").slideDown(600, masonryUpdate);
    });
});

Answer 2

要解决问题 1) 你会按照我的评论去做

$(this).addClass("intro").slideDown(600, masonryUpdate);

对于 2) 和 3) 你需要做类似

的事情

$(document).ready(function(){
    $(".item").click(function(){
        $(".intro").animate({"height": 500}, "fast").removeClass("intro"); // reset previous elements

        $(this).addClass("intro").slideDown("slow", function() { msnry.layout(); }); // refresh layout
    });
});

砌体网格点击

Masonry grid onclick

jquery

onclick

masonry