बूटस्ट्रैप पतन डेटा-पैरेंट काम नहीं कर रहा

Question

मैं बूटस्ट्रैप 2.2.1 का उपयोग कर रहा हूं और किसी भी कारण से डेटा-पैरेंट विशेषता का इरादा नहीं कर रहा है। जब मैं किसी अन्य लक्ष्य पर क्लिक करता हूं तो यह पिछले खुले लक्ष्य को बंद नहीं करता है। नीचे दिए गए कोड के साथ fiddle यहां, इसे ठीक करने के तरीके पर कोई विचार है?

<div id="accordion"> 
    <ul> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a> 
      <ul id="document" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">option 2</a> 
     </li> 
     <li> 
      <a href="#">option 3</a> 
     </li> 
     <li> 
      <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a> 
      <ul id="document2" class="collapse"> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
       <li> <a href="#">suboption 1</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

मैं इसे काम करने के लिए नहीं मिला - यह बूटस्ट्रैप जेएस में कुछ ऐसा तथ्य हो सकता है जो आप divs के बजाय सूचियों का उपयोग कर रहे हैं?

तो इसे काम करने के लिए, मुझे क्लिक ईवेंट को ओवरराइड करना पड़ा। इस सवाल का यहाँ के आधार पर: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap

मैं प्रत्येक विकल्प लिंक करने के लिए एक accordion-toggle वर्ग जोड़ा, और फिर इसे काम करने के लिए प्राप्त करने के लिए निम्न JavaScript कहा:

$(document).on('click', '.accordion-toggle', function(event) { 
     event.stopPropagation(); 
     var $this = $(this); 

     var parent = $this.data('parent'); 
     var actives = parent && $(parent).find('.collapse.in'); 

     // From bootstrap itself 
     if (actives && actives.length) { 
      hasData = actives.data('collapse'); 
      //if (hasData && hasData.transitioning) return; 
      actives.collapse('hide'); 
     } 

     var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7 

     $(target).collapse('toggle'); 
});​ 

यह fiddle कार्रवाई में यह पता चलता है।

Answer 2

बूटस्ट्रैप पतन के साथ भी संघर्ष कर रहा है। मैं कुछ अलग करने की कोशिश कर रहा था। मैं इनलाइन टॉगल व्यवहार चाहता था। नीचे मेरे जेएस पहेली देखें। मुझे जो मिला वह यह है कि बूटस्ट्रैप को उनके दस्तावेज़ों में शामिल डेटा-पैरेंट विशेषता के अतिरिक्त "accordion-group" div के अस्तित्व की आवश्यकता होती है। तो या तो जेएस में एक बग है या उनके दस्तावेज़ों में इसे शामिल नहीं किया गया है। मैं भी शून्य बाहर अकॉर्डियन-समूह div पर शैलियों था ...

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2"> 
    <div class="accordion-group" style="border:0;padding:0;margin:0"> 
     <div id="collapseOne" class="collapse in"> 
      Foo Bar... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Show Herp Derp 
      </a> 
     </div> 
     <div id="collapseTwo" class="collapse"> 
      Herp Derp... 
      <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Show Foo Bar 
      </a> 
     </div> 
    </div> 
</div> 

Answer 3

आप अपने आइटम में अकॉर्डियन-समूह वर्ग का उपयोग करने के लिए, देखें मुद्दा https://github.com/twitter/bootstrap/issues/4988

Answer 4

इसे कहते है बूटस्ट्रैप दस्तावेज में:

एक चयनकर्ता प्रदान की जाती है, तो निर्दिष्ट माता पिता के तहत सभी सिमटने तत्वों बंद कर दिया जाएगा, जब इस सिमटने आइटम दिखाया गया है। -

तो यह पैनल-समूहों के साथ इस्तेमाल किया जा रहा है (पारंपरिक अकॉर्डियन व्यवहार के समान इस panel वर्ग पर निर्भर है), लेकिन आप जावास्क्रिप्ट वैसे भी ओवरराइड कर सकते हैं।

http://getbootstrap.com/javascript/#collapse-options