Bootstrap Collapse doesn't toggle after you sh

问题:

My HTML is:

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

My example is here: http://jsfiddle.net/pdavis68/Xut4C/2/

If you remove the JavaScript code, you'll notice that the toggling of the collapse operates properly. If you click "Quick Links", "My Menus" closes and "Quick Links" opens.

If you leave the JS in, you'll notice that opening "My Menus" or "Quick Links" doesn't cause anything else to collapse, but if you open "Queue", it will still cause the others to collapse.

It doesn't seem to matter if I use "toggle", "show" or "hide" command in the collapse, it will break the toggling functionality.

Also, in the example, what ought to happen (by my reckoning, at least) is that that "My Menus" should toggle closed (which it does) and then "Quick Links" ought to toggle open (which it does NOT do.)

So, 2 questions:

1. How do I programmatically show/hide groups without breaking the toggle functionality?

2. How do I toggle things open?

回答1:

1.Try to use collapse() with options, the 'parent' is important

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

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

2.Basically you have 2 ways:

• Add class in to that div, e.g: <div id="collapseMenu" class="accordion-body collapse in"> cause that div to open.

• Use collapse() with option 'toggle': true as above, when the div is closed.

Hope it helps.

回答2:

Try activating your content as a collapsible element first. I skimmed over this part when reading the documentation and it really stumped me.

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

After you activate it you can hide and show it as usual.

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

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

回答3:

You also can add data-parent="#navaccordion" to <div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion"> and call without addional key 'parent' like .collapse({"toggle": true});