使用点击和窗口散列在Equalizer中重新初始化Zurb均衡器

Question

我有个小问题，希望有人能帮上忙。我使用的是id="myModal"，但由于一个或多个原因，我选择只使用Zurbs，而不是使用数据属性data-reveal-id="myModal"。

正因为如此，在通过单击或散列窗口触发器触发模式之后，我在尝试重新初始化均衡器时遇到了一些问题。

我的HTML看起来像这样：

<a class="about" href="#about"></a>

<div id="about" class="reveal-modal" data-reveal>
    <div class="row" data-equalizer>
        <div class="large-6 columns" data-equalizer-watch> </div>
        <div class="large-6 columns" data-equalizer-watch> </div>
    </div>
<a href="#" class="close"></a>
</div>

我的JavaScript看起来像这样：

(function($){    
    $(document).foundation({reveal:animation_speed:400,root_element:".bContent"}});
    $("a.about").on("click",function()$("#about").foundation("reveal","open")});
    $("a.close").on("click",function()$("#about").foundation("reveal","close")});
    $(document).ready(function(){var a=$(window.location.hash);a.length>0&&a.hasClass("reveal-modal")&&a.foundation("reveal","open")});
})(jQuery);

我需要的是。

点击和窗口位置上的触发器都工作得很好，我想让它在点击后或在window.location.hash期间重新初始化均衡器，我不是使用JavaScript的最佳人选，但我已经尽了最大努力，我尝试过的一些失败的尝试如下所示：

$('.reveal-modal').hasClass('open')foundation.libs.equalizer.reflow()

$(document).on('opened.fndtn.reveal', '#about', function () {
    Foundation.libs.equalizer.reflow();
});

对于窗口位置，散列如下：

$(document).ready(function(){var a=$(window.location.hash);a.length>0&&a.hasClass("reveal-modal")&&a.foundation("reflow")});

我哪里搞错了！提前感谢！

Answer 1

您应该设置specify Equalizer是否应在元素堆叠后使其高度相等。

$(document).foundation({
    equalizer : {
        equalize_on_stack: true
    }
)}

然后在分隔缝洞口上应用回流：

$(document).on('opened.fndtn.reveal', '#about', function () {
    Foundation.libs.equalizer.reflow();
});