ज़र्ब फाउंडेशन Accordion Accordion के अंदर Nested

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> 

इस स्थापना, जब माता-पिता अकॉर्डियन पैनल खोला जाता है के साथ की तरह लग रहा, बाद में बच्चों अकॉर्डियन पैनल खोल रहे हैं (या कम से कम कुछ ध्वज खोलने के लिए सेट है क्योंकि तीर खुले माता-पिता की तरह इंगित कर रहे हैं) और बाल accordion कार्यक्षमता टूट जाती है। मैं शायद फाउंडेशन पैरेंट एग्रीजन के अंदर एक jQuery UI accordion जोड़ सकता हूं, लेकिन यह माता-पिता की तरह उत्तरदायी नहीं होगा और इस प्रकार फाउंडेशन का उपयोग करने के उद्देश्य को पहले स्थान पर खो सकता है।

क्या किसी ने सफलतापूर्वक इसे पूरा किया है?

Answer 1

आपको केवल एग्रीजन आइटम पर क्लिक इवेंट प्रोजेक्शन को रोकना होगा, फिर, यदि आप बच्चे एग्रीजन आइटम में क्लिक करते हैं, तो बाल क्लिक ईवेंट मूल आइटम को बंद नहीं करेगा।

संशोधन आसान है, तो आप करने के लिए है क्लिक हैंडलर में परम ईवेंट जोड़ें, और event.stopPropagation का उपयोग करें() है; वर्तमान क्लिक किए गए तत्व के सक्रियण कोड के साथ अन्य पैरामीटर के अंदर।

संशोधित कोड, कृपया, कोड टिप्पणी पर एक नज़र डालें:

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

मैं इस मुद्दे को हो रही थी। Accordions काम करेंगे, लेकिन तीर संकेतक और स्टाइल जैसे कि प्रत्येक बच्चे accordion खुले थे।

li.active के बीच

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

नए बच्चे चयनकर्ता और .title: यह एक सीएसएस "बग" है कि आप लाइनों 715 और foundation.css के 716 के लिए एक अतिरिक्त बच्चे चयनकर्ता जोड़कर ठीक कर सकते हैं है ।