jQuery masonry 插件 Inside an Accodion，一个复杂的集成

Question

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

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

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

面板打开后，我想将面板内的项目作为 jquery.masonry 插件项目，因为当有人点击项目时，它会向下扩展并显示一些描述，也想安排在顺序，如下图所示。

所以我在这里准备了一个fiddle，到目前为止我已经取得了一些成就，但现在我的脚本可以显示面板，以及这些面板中的砌体项目，但仅对于第一个面板，砌体项目上的扩展效果很好，认为存在一些绑定问题，但我无法解决问题，我们将不胜感激。

这是 Fiddle，完整 html、css 和 js，请检查此以了解我要解释的问题。

fiddle: 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()

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

Fiddle: jsfiddle

jQuery masonry 插件 Inside an Accodion，一个复杂的集成

jQuery masonry plugin Inside an Accodion, a complex integration

html

css

jquery

jquery-ui-accordion

jquery-masonry