javascript - Bootstrap Collapse no cambia después de mostrar, ocultar o alternar desde el código

twitter-bootstrap

Question

Mi HTML es:

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

Mi ejemplo está aquí: http://jsfiddle.net/pdavis68/Xut4C/2/

Si elimina el código JavaScript, notará que el cambio del colapso funciona correctamente. Si hace clic en "Enlaces rápidos", "Mis menús" se cierra y se abre "Enlaces rápidos".

Si deja el JS en, notará que al abrir "Mis menús" o "Enlaces rápidos" no se colapsará nada más, pero si abre "Cola", los demás se colapsarán.

No parece importar si uso el comando "toggle", "show" u "hide" en el colapso, se interrumpirá la funcionalidad de alternar.

Además, en el ejemplo, lo que debería suceder (según mis cálculos, al menos) es que "Mis menús" debe cerrarse (lo que hace) y luego "Enlaces rápidos" debe abrirse (lo que NO hace). )

Entonces, 2 preguntas:

1. ¿Cómo puedo mostrar / ocultar grupos sin romper la funcionalidad de alternar?

2. ¿Cómo hago para que las cosas se abran?

Answer 1

1.Trate de usar collapse() con opciones, el ''parent'' es importante

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

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

2. Básicamente tienes 2 formas:

• Agregue una clase a ese div, por ejemplo: <div id="collapseMenu" class="accordion-body collapse in"> causa que ese div se abra.

• Use collapse() con la opción ''toggle'': true como el anterior, cuando se cierra el div.

Espero eso ayude.

Answer 2

Intenta activar tu contenido como un elemento colapsable primero. Hojeé esta parte al leer la documentación y realmente me sorprendió.

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

Después de activarlo, puede ocultarlo y mostrarlo como de costumbre.

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

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

Answer 3

También puede agregar data-parent="#navaccordion" a <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> y llamar sin la tecla adicional ''parent'' como .collapse({"toggle": true});