web-dev-qa-db-ja.com

Bootstrapコードの表示、非表示、切り替え後、折りたたみは切り替わりません

私の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. トグル機能を壊さずにプログラムでグループを表示/非表示するにはどうすればよいですか？

  2. 物事を開くにはどうすればいいですか？

javascripttwitter-bootstrapcollapse
20
Pete

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に追加します。例：_<div id="collapseMenu" class="accordion-body collapse in">_はそのdivを開きます。

  • Divが閉じられているときに、上記のようにcollapse()をオプション_'toggle': true_とともに使用します。

それが役に立てば幸い。

21
Hieu Nguyen

まず、折りたたみ可能な要素としてコンテンツをアクティブにしてみてください。ドキュメントを読んでいるときにこの部分をざっと読んだのですが、本当に困りました。

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

有効にすると、通常どおり非表示および表示できます。

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

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

8
Jared Christensen

_data-parent="#navaccordion"_を_<div id="collapseMenu" class="accordion-body collapse" data-parent="#navaccordion">_に追加し、.collapse({"toggle": true});のような追加キーなしで呼び出すこともできます_'parent'_

2
woto