बूटस्ट्रैप संक्षिप्त करें आप, दिखाने को छिपाने के बाद टॉगल नहीं करता है या कोड

Question

से टॉगल

मेरे HTML है:

<div id="accordion-container"> 
    <div class="accordion" id="navaccordion"> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseMenu"> 
        <strong>My Menus</strong> 
       </a> 
      </div> 
      <div id="collapseMenu" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        <div class="navigation" id="navigationcontainer"> 
         <span id="menutree"> 
          MenuTree 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQuickLinks"> 
        <strong>Quick Links</strong> 
       </a> 
      </div> 
      <div id="collapseQuickLinks" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="quicklinks" id="quicklinkscontainer"> 
         <span id="quicklinkslist"> 
          QuickLinks 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="accordion-group"> 
      <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#navaccordion" href="#collapseQueue"> 
        <strong>Queue</strong> 
       </a> 
      </div> 
      <div id="collapseQueue" class="accordion-body collapse"> 
       <div class="accordion-inner"> 
        <div class="queue" id="queuecontainer"> 
         <span id="queuetree"> 
          Queue 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

मेरे उदाहरण यहाँ है: http://jsfiddle.net/pdavis68/Xut4C/2/

आप जावा स्क्रिप्ट कोड को निकाल देते हैं, तो आप देखेंगे कि पतन की टॉगल ठीक से चलती है। यदि आप "त्वरित लिंक" पर क्लिक करते हैं, तो "मेरा मेनू" बंद हो जाता है और "त्वरित लिंक" खुलता है।

यदि आप जेएस को छोड़ देते हैं, तो आप देखेंगे कि "माई मेनस" या "क्विक लिंक" खोलने से कुछ और नहीं हो सकता है, लेकिन यदि आप "कतार" खोलते हैं, तो यह अभी भी दूसरों को पतन।

यह कोई फर्क नहीं पड़ता कि अगर मैं पतन में "टॉगल", "शो" या "छुपाएं" कमांड का उपयोग करता हूं, तो यह टॉगलिंग कार्यक्षमता को तोड़ देगा।

इसके अलावा, उदाहरण में, क्या होना चाहिए (मेरे गणना के अनुसार, कम से कम) यह है कि "माई मेनस" को बंद करना चाहिए (जो यह करता है) और फिर "त्वरित लिंक" को खुले टॉगल करना चाहिए (जो इसे ऐसा नहीं करता है)

तो, 2 सवाल:।

1. मैं कैसे प्रोग्राम के रूप में/छिपाने समूहों टॉगल कार्यक्षमता को तोड़ने के बिना दिखाते हैं?

2. मैं चीजों को कैसे खोलूं? विकल्पों के साथ collapse() उपयोग करने के लिए

Answer 1

1.Try, 'parent' महत्वपूर्ण है

$("#collapseMenu").collapse({"toggle": true, 'parent': '#navaccordion'}); 
$("#collapseQuickLinks").collapse({"toggle": true, 'parent': '#navaccordion' }); 

फिडल:

• जोड़ें: http://jsfiddle.net/hieuh25/Xut4C/6/

  2.Basically आप 2 तरीके हैं कक्षा in उस div के लिए, उदाहरण: <div id="collapseMenu" class="accordion-body collapse in"> उस div को खोलने का कारण बनता है।

• collapse() का उपयोग 'toggle': true विकल्प के साथ, जब div बंद हो जाता है।

उम्मीद है कि यह मदद करता है।

Answer 2

तुम भी <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> करने के लिए data-parent="#navaccordion" जोड़ सकते हैं और तरह .collapse({"toggle": true});

Answer 3

बिना addional कुंजी 'parent' फोन पहले एक संक्षिप्त होने तत्व के रूप में अपनी सामग्री को सक्रिय करने का प्रयास कर सकते हैं। प्रलेखन पढ़ने के दौरान मैंने इस भाग पर स्किम किया और यह वास्तव में मुझे फंस गया।

$('#myCollapsible').collapse({ 
    toggle: false 
}) 

इसे सक्रिय करने के बाद आप इसे सामान्य रूप से छुपा सकते हैं और दिखा सकते हैं।

$('#myCollapsible').collapse('hide'); 
$('#myCollapsible').collapse('show'); 

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