web-dev-qa-db-ja.com

Bootstrap折りたたみプラグインを使用したJavascriptトグル

Bootstrap折りたたみプラグインのトグル機能をプログラムで使用しようとしています。アコーディオン見出しのリンクをクリックすると、divをトグルできますが、機能するのは1回だけです。つまり、もう一度クリックしてdivを非表示にすることはできません。

これが私のコードです：

<div id="accordion" class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a id="program${bean.id}" data-parent="#accordion" 
                   class="accordion-toggle">
            ...
            </a>
        </div>
        <div id="collapse${bean.id}" class="accordion-body collapse">
            <div class="accordion-inner">
            ...
        </div>
    </div>
</div>

そして後でJSPで：

$.each($('#accordion a.accordion-toggle'), function(i, link){
    $(link).on('click', 
        function(){
            // ...
            $('#collapse' + id_of_a_bean).collapse({
                toggle : true,
                parent : '#accordion'
            });
            // ...
        }
    )
});

私は何か見落としてますか？

twitter-bootstraptogglecollapse
9
tduchateau

これは多くの人に起こったと思います。

collapse関数（FYIまたは任意のbootstrap関数））を呼び出すとき、オブジェクトを渡すと、initiate折りたたみ。toggleオプションは、呼び出し時に1回だけ切り替わります（ doc ）。

パラメータを使用して1回呼び出してから、アクションのみを文字列として呼び出す必要があります。

$.each($('#accordion a.accordion-toggle'), function(i, link){
    var $collapsible = $('#collapse' + id_of_a_bean); // Let's be thorough

    $collapsible.collapse({
        toggle : true, // May not be necessary anymore
        parent : '#accordion'
    });

    $(link).on('click', 
        function(){
            // ...
            $collapsible.collapse('toggle'); // Here is the magic trick
            // ...
        }
    );
});

ライブデモ： http://jsfiddle.net/Sherbrow/uycBa/

正確に言うと、initプロセスは、同じ要素で既に実行している場合は中止されるため、一度だけ呼び出すことができます。それが一度だけ機能した理由です。

21
Sherbrow

同様の問題、要素が表示されているかどうかを確認するだけです。

$("#myDiv").is(":visible") ? $("#myDiv").collapse('hide') : /*do nothing*/;
2
Alex

折りたたみを2回呼び出すだけで、1回は親あり、もう1回はなしで、トリックが非常にうまくいくことがわかりました。このソリューションは、階層があるため、私のソリューションでは好まれました。

onclick="
$('@("#collapse" + lead.LeadId)').collapse({parent: '#accordion', toggle: true});
$('@("#collapse" + lead.LeadId)').collapse('toggle');"
1
Antonio Nicolaas Teyken