1

私は財団に不慣れです。私は現在、アコーディオン内にイコライザー列を配置することに固執しています。

何が起こったのかというと、アコーディオンは内部にコンテンツを入れる十分なスペースを作らず、コンテンツがパネルから流れ出してしまったように見えました。いくつかの試行の後、「data-equalizer」と「data-equalizer-watch」がここでの原因であることに気付きました。削除すると、すべて正常に動作します。しかし、私は 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要素に対してのみ機能します。閉じたアコーディオン行内に保持するものはすべて not: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 に配置して、イベント ハンドラーを Foundation js の外部に保持します。

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