当我按下手风琴时砌体不起作用(高度不增加)

Question

我有一个手风琴在一个div名为card(我使用Foundation 6)。我试图应用砌体(https://masonry.desandro.com)，它没有工作。当我打开手风琴时，砌体不明白。

https://youtu.be/mXNbJ5bjg88

代码:https://codepen.io/yeltsinxyz/pen/porwbbN

<div class="grid-x grid-margin-x medium-up-2 small-up-1 large-up-3 locais-cards align-stretch">
<div class="cell">
<div class="card">
<img src="img/sobremesa1.jpg" alt="">
<div class="card-section">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Sorvete</a>
<div class="accordion-content" data-tab-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, voluptatum tempora doloremque sapiente iste deserunt ex excepturi totam quo natus expedita amet ducimus alias repellendus dolorem ut mollitia dolore nemo?</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Restaurante</a>
<div class="accordion-content" data-tab-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, voluptatum tempora doloremque sapiente iste deserunt ex excepturi totam quo natus expedita amet ducimus alias repellendus dolorem ut mollitia dolore nemo?</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Como Chegar</a>
<div class="accordion-content" data-tab-content>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi, voluptatum tempora doloremque sapiente iste deserunt ex excepturi totam quo natus expedita amet ducimus alias repellendus dolorem ut mollitia dolore nemo?</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

JS

$(document).foundation();
$(window).on('load', function(){
$('.locais-cards').masonry({
itemSelector: '.locais-cards .cell'
});
});

Answer 1

您需要在手风琴打开或关闭时触发masonry，因此您需要对

作出反应

• down.zf.accordion
• up.zf.accordion

事件如https://get.foundation/sites/docs/accordion.html#js-events

所述因此，对于您的具体示例，您需要使用

$(document).on('down.zf.accordion up.zf.accordion',()=>{
$('.locais-cards').masonry();
});

更新的演示:https://codepen.io/gpetrioli/pen/dyzRXjL