Zurb Foundation Akkordeon im Akkordeon verschachtelt

Question

Ich verwende Zurb Foundation für eine responsive Website. Ich möchte ein Akkordeon verschachtelt innerhalb eines Akkordeons erhalten die folgende HTML-Struktur mit:

<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> 

Sieht aus wie mit diesem Setup, wenn das übergeordnete Akkordeon-Panel geöffnet ist, werden die nachfolgenden Kinder Akkordeon Platten werden geöffnet (oder zumindest Einige Flags werden geöffnet, weil die Pfeile nach unten zeigen wie beim geöffneten Parent) und die Child-Akkordeon-Funktion bricht. Ich könnte wahrscheinlich ein jQuery-UI-Akkordeon innerhalb des Foundation-Eltern-Akkordeons hinzufügen, aber es würde nicht wie das Eltern-Element reagieren und somit den Grund für die Verwendung von Foundation überhaupt zunichte machen.

Hat jemand dies erfolgreich erreicht?

Answer 1

Sie müssen nur die Klickereignisprognose über die Akkordeonelemente stoppen. Wenn Sie dann in ein untergeordnetes Akkordeonelement klicken, schließt das Kindklickereignis das übergeordnete Element nicht.

Die Änderung ist einfach, Sie müssen fügen Sie das Ereignis param im Click-Handler, und verwenden Sie event.stopPropagation(); in der else-Datei mit dem Aktivierungscode des aktuell angeklickten Elements.

der modifizierte Code, bitte werfen Sie einen Blick auf den Code Kommentare:

;(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

ich dieses Problem mit wurde. Die Akkordeons würden funktionieren, aber die Pfeilanzeige und das Styling waren so, als ob jedes Akkordeon geöffnet wäre. Dies ist ein CSS „Bug“, die Sie durch Hinzufügen eines zusätzlichen Kinderwähler auf Linien 715 und 716 von foundation.css beheben können:

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

Das neue Kind-Selektor ist zwischen li.active und .title .