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

您必须通过执行此操作来处理点击事件处理程序中单击的元素

$(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);

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

砌体网格onclick

2 个答案: