jQuery masonry插件在Accodion内部，一个复杂的集成

Question

很难解决问题，也很难解释这个场景，所以我附上了一张图片，解释了我想要实现的目标。见下图

现在，我正在使用自定义代码来调用面板，一个简单的jquery脚本，就像这样

$('.widgets_area').find('.widget_title').on('click', function(e){
            e.preventDefault();
              $(this).next().slideToggle('fast')
}

一旦面板打开，我想将该面板中的项目作为jquery.masonry插件项目，因为当有一个单击项目时它将展开向下并显示一些描述，也想按顺序排列，如图所示如下图所示。

所以我在这里准备了一个小提琴，到目前为止，我已经取得了一些成果，现在我的剧本可以显示面板，还有这些面板内的砌体项目，但仅限于第一个面板扩展砌筑物上的东西运作良好，认为有一些约束性问题，但我无法解决问题，任何帮助将不胜感激。

这是小提琴，有完整的html，css和js，请查看这个，了解我想解释的问题。

小提琴：Masnory+Accordion

Answer 1

试试这个：

$('.widgets_area').find('.widget_title').on('click', function (e) {
e.preventDefault();
$(this).next().slideToggle('fast', function () {
    var $this = $(this);
    $this.prev().addClass('wd_act');
    $this.parent().addClass('wd_open');

    var $grid2 = $($this).children().first().masonry({
        columnWidth: 0,
        itemSelector: '.grid-item'
    });

    $grid2.on('click', '.widget_bx', function () {
        //alert('dsaf');
        $(this).next('.wd_info').toggle();
        $(this).parent('.grid-item').toggleClass('is-expanded');
        $grid2.masonry();
    });

});
//Hide the other panels
$(".wd_list_wrap").not($(this).next()).slideUp('fast');
$(".wd_list_wrap").not($(this).next()).prev('.widget_title').removeClass('wd_act');
$(".wd_list_wrap").not($(this).next()).parent().removeClass('wd_open');

});

我认为这可能对你有用我只用这样的动态替换静态元素：

<强>静态：

var $grid2 = $('.grid2')

<强>动态：

var $grid2 = $($this).children().first()

注意：现在您不需要为每个元素放置单独的脚本。

小提琴：jsfiddle