9

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'
            });
            // ...
        }
    )
});

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

4

3 に答える 3

21

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

collapse関数（FYIまたは任意のブートストラップ関数）を呼び出すときに、オブジェクトを渡すと、折りたたみを開始することを意味します。この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プロセスを1回だけ呼び出すことができます。それが一度だけ機能した理由です。

于 2012-06-26T12:49:04.400 に答える
3

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

$("#myDiv").is(":visible") ? $("#myDiv").collapse('hide') : /*do nothing*/;
于 2014-09-19T02:12:02.267 に答える
1

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

onclick="
$('@("#collapse" + lead.LeadId)').collapse({parent: '#accordion', toggle: true});
$('@("#collapse" + lead.LeadId)').collapse('toggle');"
于 2014-09-11T15:53:03.177 に答える