アコーディオンの中に入れられたアコーディオンのアコーディオン

Question

レスポンシブウェブサイトには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を使用する目的を破る可能性があります。

これを成功裏に達成した人はいますか？

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

Answer 2

。アコーディオンは機能しますが、矢印インジケーターとスタイリングはあたかも子供のアコーディオンが開いているかのようです。これは、ライン715とfoundation.cssの716に追加の子セレクタを追加することによって修正することができますCSS「バグ」である：

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の間にあります。