1

我是基金会的新手。我目前被困在 Accordion 中使用 Equalizer 列。

发生的事情是，Accordion 没有为里面的内容创造足够的空间，使它看起来好像内容从它的面板中流出。经过几次尝试，我意识到“数据均衡器”和“数据均衡器手表”是这里的罪魁祸首。一旦我删除它，一切正常。但是我真的希望在 Accordion 中保留 Equalizer。

http://rubyss.com/i/cleanpro2

对不起，我的英语不好。请单击照片部分中的类别类型 2 和类型 3 以查看我在说什么。

谢谢你们。

<dl class="accordion" id="gallery-list" data-accordion>
                <dd>
                    <a class="title" href="#panel1">Category Type 1</a>
                    <div id="panel1" class="content active">                        
                        <div class="row" data-equalizer>
                            <div class="large-4 medium-4 columns panel" style="background: pink" data-equalizer-watch>
                                <h3 class="blue title">2014</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                    <li><a href="#">Photo Album 04</a></li>
                                    <li><a href="#">Photo Album 05</a></li>
                                </ul>   
                            </div>  
                            <div class="large-4 medium-4 columns panel" style="background: pink" data-equalizer-watch>
                                <h3 class="blue title">2013</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                </ul>   
                            </div>  
                            <div class="large-4 medium-4 columns panel" style="background: pink" data-equalizer-watch>
                                <h3 class="blue title">2012</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                    <li><a href="#">Photo Album 04</a></li>
                                </ul>   
                            </div>  
                        </div>  
                    </div>
                </dd>
                <dd>
                    <a class="title" href="#panel2">Category Type 2</a>
                    <div id="panel2" class="content">
                        <div class="row" data-equalizer>
                            <div class="large-4 medium-4 columns panel" style="background: #cccccc" data-equalizer-watch>
                                <h3 class="blue title">2014</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                    <li><a href="#">Photo Album 04</a></li>
                                    <li><a href="#">Photo Album 05</a></li>
                                </ul>   
                            </div>  
                            <div class="large-4 medium-4 columns panel" style="background: #cccccc" data-equalizer-watch>
                                <h3 class="blue title">2013</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                </ul>   
                            </div>  
                            <div class="large-4 medium-4 columns panel" style="background: #cccccc" data-equalizer-watch>
                                <h3 class="blue title">2012</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                    <li><a href="#">Photo Album 04</a></li>
                                </ul>   
                            </div>  
                        </div>  
                    </div>
                </dd>
                <dd>
                    <a class="title" href="#panel3">Category Type 3</a>
                    <div id="panel3" class="content">
                        <div class="row" data-equalizer>
                            <div class="large-4 medium-4 columns panel" style="background: #dddddd" data-equalizer-watch>
                                <h3 class="blue title">2014</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                    <li><a href="#">Photo Album 04</a></li>
                                    <li><a href="#">Photo Album 05</a></li>
                                </ul>   
                            </div>  
                            <div class="large-4 medium-4 columns panel" style="background: #dddddd" data-equalizer-watch>
                                <h3 class="blue title">2013</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                </ul>   
                            </div>  
                            <div class="large-4 medium-4 columns panel4" style="background: #dddddd" data-equalizer-watch>
                                <h3 class="blue title">2012</h3>
                                <ul class="gallery-list">
                                    <li><a href="#">Photo Album 01</a></li>
                                    <li><a href="#">Photo Album 02</a></li>
                                    <li><a href="#">Photo Album 03</a></li>
                                    <li><a href="#">Photo Album 04</a></li>
                                </ul>   
                            </div>  
                        </div>
                    </div>
                </dd>
            </dl>
4

1 回答 1

1

基础均衡器仅适用于:visible元素，您保留在封闭手风琴行内的所有内容不是:visible，因此不会对其进行处理。

<dd>在使用此语句打开一行后，您必须再次启动均衡器：

Foundation.libs.equalizer.reflow();

实际上（5.2.2版）手风琴没有任何open事件的回调函数，所以只需进入foundation.accordion.js文件并在 .on('click.fndtn.accordion'...函数结束时触发一个自定义事件，如下所示：

accordion.trigger('accordion-toggled');

下面修改foundation.accordion.js事件方法（5.2.2版本第19行）带有事件触发器

events : function () {
  var self = this;
  var S = this.S;
  S(this.scope)
  .off('.fndtn.accordion')
  .on('click.fndtn.accordion', '[' + this.attr_name() + '] dd > a', function (e) {
    var accordion = S(this).closest('[' + self.attr_name() + ']'),
        target = S('#' + this.href.split('#')[1]),
        siblings = S('dd > .content', accordion),
        aunts = $('dd', accordion),
        settings = accordion.data(self.attr_name(true) + '-init'),
        active_content = S('dd > .content.' + settings.active_class, accordion),
        active_parent = S('dd.' + settings.active_class, accordion);
    e.preventDefault();

    if (! S(this).closest('dl').is(accordion)) { return; }

    if (settings.toggleable && target.is(active_content)) {
      active_parent.toggleClass(settings.active_class, false);
      return target.toggleClass(settings.active_class, false);
    }

    if (!settings.multi_expand) {
      siblings.removeClass(settings.active_class);
      aunts.removeClass(settings.active_class);
    }

    target.addClass(settings.active_class).parent().addClass(settings.active_class);
    accordion.trigger('accordion-toggled'); //add this line
  });
}

然后，在你的 js 中放置一个监听器，这样你就可以将事件处理程序放在基础 js 之外：

$(document).on( "accordion-toggled", function({   
    Foundation.libs.equalizer.reflow();
});
于 2014-07-25T00:39:55.393 回答