2

展開および折りたたむための次のJavaスクリプトコードがあります。

$(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");
     } 
    });
});

ここでは正常に動作します：

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

静的テキスト（展開、折りたたみ）を削除し、どういうわけかHTMLに配置する必要があります。トグルクラス関数を使用したアクションに基づいて、テキストとアイコンのプラス記号またはマイナス記号を非表示にする方法はありますか？

これが私がこれまでに試したことですが、まったく機能しません。

$(function () {

   $(document).on('click', '.expandcollapse', function(e) {

     $(this).removeClass('icon-white icon-minus-sign');
     $('.collapse').each(function(index) {
       $(this).collapse("toggle");
     });

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

     } 
    });
});

これが私のhtmlです（私はhaml構文を使用しています）

 %i.icon-white.icon-plus-sign
    Expand All
  %i.icon-white.icon-minus-sign
    Collapse All

更新：これは私が試したものの、それを機能させることができなかったものです。 http://jsfiddle.net/HqXMN/11/

4

1 に答える 1

2

まず、ifステートメントにjQuery .is()（http://api.jquery.com/is/）を使用することをお勧めします。そうすれば、コードがより柔軟になります。それなら、toggleClassあなたにも役立つと思います。私はあまりしませんでしたが、ここからが始まりです。

JS：

$(function () {
    $(document).on('click', '.expandcollapse', function (e) {

        $('.collapse').each(function (index) {
            $(this).collapse("toggle");
        });

        if ($(this).is('.icon.white-icon .iconplus-sign')) {
            $(this).toggleClass('is-collapsed');
        } else {
            $(this).toggleClass('is-collapsed');

        }
    });
});

CSS：

.expandcollapse .icon-plus-sign {
    display:block;
}
.expandcollapse .icon-minus-sign {
    display:none;
}
.is-collapsed .icon-plus-sign {
    display:none;
}
.is-collapsed .icon-minus-sign {
    display:block;
}

デモはこちら： http： //jsfiddle.net/pavloschris/HqXMN/13/

お役に立てば幸いです。

于 2013-03-06T17:29:53.740 に答える