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, вы заметите, что открытие "мои меню" или "быстрые ссылки" не вызывает ничего другого, чтобы свернуть, но если вы откроете "очередь", это все равно вызовет остальные рухнут.

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

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

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

  1. как программно Показать/Скрыть группы без нарушения функции переключения?

  2. Как я могу переключать вещи?

19
collapse javascript twitter-bootstrap

3 ответов

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

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

Скрипка:http://jsfiddle.net/hieuh25/Xut4C/6/

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

  • добавить класс in к этому div, e.g:<div id="collapseMenu" class="accordion-body collapse in"> заставьте этот div открыться.

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

надеюсь, что это помогает.

20

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

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

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

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

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

8

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

2