0

すべて展開/すべて折りたたみ機能にわずかな問題があります。

これが私のjsfiddelリンクです：

http://jsfiddle.net/HqXMN/10/

Name1とName2を展開してから、[すべて展開]ボタンをクリックするとします。これは、Name1とName2を折りたたむ以外は、すべてを展開します。

javascrit関数でcssidを指定しますか？

$(function () {
    $(document).on('click', '.expandcollapse', function(e) {
        $('.collapse').each(function(index) {
            $(this).collapse("toggle");
        });

        if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") {
            $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
        }
        else {
            $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
        } 
    });
});
4

1 に答える 1

1

ボタンの現在の状態に基づいて、特定のアクションを実行する必要があります。これを行う 1 つの方法は、ボタンが特定の状態にあるときに特定のクラスをボタンに割り当てることです。

注:グループ管理が行われているため、すべて展開/折りたたむボタンと個々のコントロールを組み合わせて使用​​すると、状態が混乱するように見えます。

$(document).on('click', '.expandcollapse', function (e) {
    // Perform specific action based on current state
    if ($(this).hasClass('collapseAll')) {
        $('.collapse').collapse('hide');
        $(this).removeClass('collapseAll').html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
    } else {
        $('.collapse').collapse('show');
        $(this).addClass('collapseAll').html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
    }
});

デモ

グループ管理をオフにして、そのシナリオでこれがどのように正しく機能するかを確認するdata-parent='#programs-accordion'には、すべてのアイテムを削除するか、Javascript の先頭に次の行を追加します。

$('.collapse').collapse({
    toggle: false
});

デモ- グループ管理なし

于 2013-03-07T20:37:39.730 に答える