7

レスポンシブ Web サイトにZurb Foundationを使用しています。次の HTML 構造を使用して、アコーディオン内にネストされたアコーディオンを取得したいと思います。

<ul class="accordion">
    <li class="active">
        <div class="title">First Accordion Panel Title</div>
        <div class="content">First Accordion Panel Content</div>
    </li>
    <li>
        <div class="title">Second Accordion Panel Title</div>
        <div class="content">Second Accordion Panel Content</div>
    </li>
    <li>
        <div class="title">Parent Accordion Panel Title</div>
        <div class="content">

            <ul class="accordion">
                <li class="active">
                    <div class="title">Child Accordion Panel Title</div>
                    <div class="content">Child Accordion Panel Content</div>
                </li>
                ...
            </ul>

        </div>
    </li>
</ul>

このセットアップでは、親アコーディオン パネルが開かれると、後続の子アコーディオン パネルが開かれ (または、開いている親のように矢印が下を向いているため、少なくともいくつかのフラグが開くように設定され)、子アコーディオン機能が壊れます。おそらく、Foundation の親アコーディオン内に jQuery UI アコーディオンを追加できますが、親のように反応しないため、そもそも Foundation を使用する目的に反する可能性があります。

誰かがこれを成功させましたか？

4

2 に答える 2

1

アコーディオン項目に対するクリック イベントの伝播を停止するだけで、子アコーディオン項目をクリックしても、子クリック イベントは親項目を閉じません。

変更は簡単です。クリック ハンドラに param イベントを追加し、event.stopPropagation();を使用する 必要があります。現在クリックされている要素のアクティブ化コードを含むelseステートメント内。

変更されたコードは、コードのコメントを見てください。

;(function ($, window, undefined){   'use strict';

  $.fn.foundationAccordion = function (options) {
    var $accordion = $('.accordion');

    if ($accordion.hasClass('hover') && !Modernizr.touch) {
      $('.accordion li', this).on({
        mouseenter : function () {
          var p = $(this).parent(),
            flyout = $(this).children('.content').first();
          $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      });
    } else { 
      //be sure to add the param event in the click function handler
      $('.accordion li', this).on('click.fndtn', function (event) {
        var li = $(this),
            p = $(this).parent(),
            flyout = $(this).children('.content').first();

        if (li.hasClass('active')) { 
          p.find('li').removeClass('active').end().find('.content').hide();
        } else {
          //stop event propagation          
      event.stopPropagation();
          $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
          flyout.show(0, function () {
            flyout.parent('li').addClass('active');
          });
        }
      });
    }

  };

})( jQuery, this );
于 2012-12-20T13:16:39.977 に答える
0

私はこの問題を抱えていました。アコーディオンは機能しますが、矢印インジケータとスタイルは、各子アコーディオンが開いているかのようでした。これは CSS の「バグ」であり、foundation.css の 715 行目と 716 行目に追加の子セレクターを追加することで修正できます。

ul.accordion > li.active > .title { background: white; padding-top: 13px; }
ul.accordion > li.active > .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: #9d9d9d transparent transparent transparent; }

新しい子セレクターは、li.activeと.titleの間にあります。

于 2013-03-06T17:19:30.890 に答える