我是基金会的新手。我目前只是在Accordion中使用均衡器列。
发生的事情是,Accordion没有为内容创造足够的空间,使其看起来好像内容从其面板流出。经过几次尝试,我意识到“数据均衡器”和“数据均衡器 - 手表”是罪魁祸首。一旦我删除它一切正常。但是我真的希望在Accordion中保持均衡器。
抱歉我的英语不好。请点击类别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>
答案 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
});
}