Bootstrap Collapse nie przełączać po pokazać, ukryć lub przełączyć z kodu

Question

Moje HTML jest:

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

Mój przykład jest tutaj: http://jsfiddle.net/pdavis68/Xut4C/2/

Jeśli usunąć kod JavaScript, zauważysz że przełączenie zawalenia działa poprawnie. Jeśli klikniesz "Quick Links", "Moje menu" zamknie się i otworzy się "Quick Links".

Jeśli opuścisz JS, zauważysz, że otwarcie "Moje menu" lub "Szybkie linki" nie powoduje zwinięcia niczego innego, ale jeśli otworzysz "Kolejka", spowoduje to, że inni zawalić się.

Wygląda na to, że nie ma znaczenia, czy użyję polecenia "przełącz", "pokaż" lub "ukryj" w zwijaczu, to spowoduje przerwanie działania przełącznika.

Również w tym przykładzie, co powinno się stać (przynajmniej moim zdaniem) jest to, że "Moje menu" powinno się zamknąć (co robi), a następnie "Szybkie linki" powinny się przełączać (co nie robi)

Więc 2 pytania:.

1. Jak programowo pokazać/ukryć grupy bez rozbijania funkcjonalność przełączania?

2. Jak mogę przełączać rzeczy otwarte?

Answer 1

1.Try używać collapse() z opcji wybierz 'parent' jest ważna

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

Fiddle: http://jsfiddle.net/hieuh25/Xut4C/6/

2.Basically masz 2 sposoby:

• Dodawaj klasa in do tego div, np .: <div id="collapseMenu" class="accordion-body collapse in"> powoduje, że div otworzyć.

• Użyj collapse() z opcją 'toggle': true jak wyżej, gdy element div jest zamknięty.

Mam nadzieję, że to pomaga.

Answer 2

Można również dodać data-parent="#navaccordion" do <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> i wywołać bez addional klucza 'parent' jak .collapse({"toggle": true});

Answer 3

Spróbuj aktywowanie treści składanego jako pierwszy element. Przeszukałem tę część, czytając dokumentację, co naprawdę mnie zaskoczyło.

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

Po aktywacji można go ukryć i pokazać jak zwykle.

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

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