Bootstrap Collapse не переключается после того, как вы показываете, скрываете или переключаете код

Мой 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/

Если вы удалите код JavaScript, вы заметите, что переключение коллапса работает правильно. Если вы нажмете "Быстрые ссылки", откроется "Мои меню" и откроется "Быстрые ссылки".

Если вы оставите JS, вы заметите, что открытие "Мое меню" или "Быстрые ссылки" не приводит к коллапсу, но если вы откроете "Очередь", это все равно приведет к краху остальных.

Кажется, не имеет значения, если я использую команду "переключить", "показать" или "скрыть" в сворачивании, она сломает функциональность переключения.

Кроме того, в примере, что должно произойти (по моим расчетам, по крайней мере), это то, что "Мои меню" должны переключаться закрытыми (что он делает), а затем "Быстрые ссылки" должны переключаться открыто (что он делает НЕ делайте.)

Итак, 2 вопроса:

  • Как программно показывать/скрывать группы без нарушения функций переключения?

  • Как открыть вещи для переключения?

Ответы

Ответ 1

1.Попробуйте использовать collapse() с параметрами, важно 'parent'

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

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

2. В основном у вас есть 2 способа:

  • Добавьте класс in в этот div, например: <div id="collapseMenu" class="accordion-body collapse in">, чтобы открыть div.

  • Используйте collapse() с опцией 'toggle': true, как указано выше, когда div закрыт.

Надеюсь, что это поможет.

Ответ 2

Сначала попробуйте активировать ваш контент в виде сбрасываемого элемента. Я просматривал эту часть, читая документацию, и это меня сильно забивало.

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

После его активации вы можете скрыть и показать его как обычно.

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

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

Ответ 3

Вы также можете добавить data-parent="#navaccordion" в <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> и вызвать без дополнительной клавиши 'parent' как .collapse({"toggle": true});