Fisarmonica nidificata all'interno di Zurb Foundation

Question

Sto utilizzando Zurb Foundation per un sito Web reattivo. Mi piacerebbe avere una fisarmonica nidificato all'interno di una fisarmonica con la seguente struttura 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> 

Sembra che con questa configurazione, quando il pannello superiore di fisarmonica è aperto, le successive pannelli figli fisarmonica vengono aperti (o almeno un po 'di flag è impostato per aprire perché le frecce sono rivolte verso il basso come il genitore aperto) e la funzionalità della fisarmonica figlio si interrompe. Probabilmente potrei aggiungere una fisarmonica UI jQuery all'interno della fisarmonica madre della Fondazione, ma non sarebbe reattiva come quella del genitore e quindi potrebbe vanificare lo scopo di usare Foundation in primo luogo.

Qualcuno ha completato con successo questo?

Answer 1

Devi solo interrompere la progione degli eventi di clic sugli elementi di fisarmonica, quindi, se fai clic su un elemento di fisarmonica figlio, l'evento di clic secondario non chiuderà l'elemento genitore.

La modifica è facile, si deve aggiungere l'evento param nel gestore click, e utilizzare event.stopPropagation(); all'interno dello else statament con il codice di attivazione dell'elemento cliccato corrente.

il codice modificato, per favore, dare un'occhiata ai commenti del codice:

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

ho avuto questo problema. Le fisarmoniche funzionerebbero, ma l'indicatore della freccia e lo stile erano come se ogni fisarmonica di bambino fosse aperta. Si tratta di un CSS "bug" che si può risolvere con l'aggiunta di un selettore figlio in più per le linee 715 e 716 di foundation.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; } 

Il nuovo selettore bambino è tra li.active e .title .