Accordion中的均衡器列

时间:2014-04-11 16:35:02

标签: zurb-foundation accordion equalizer

我是基金会的新手。我目前只是在Accordion中使用均衡器列。

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

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>

1 个答案:

答案 0 :(得分:1)

基础均衡器仅适用于:visible元素, <= 1}}所有你保持在闭合手风琴行内的东西都没有被处理过。

使用此参数打开:visible行后,您必须再次启动均衡器:

<dd>

实际上(版本5.2.2)手风琴没有任何开放事件的回调函数, 所以只需进入foundation.accordion.js文件并在Foundation.libs.equalizer.reflow(); 函数结束时触发自定义事件,如下所示:

.on('click.fndtn.accordion'...

修改后的foundation.accordion.js事件方法(5.2.2版本中的第19行)下面 使用事件触发器

accordion.trigger('accordion-toggled');

然后,在你的js中放一个监听器,这样你就可以把你的事件处理程序放在基础js之外了:

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
  });
}