4

ヘルプ、ブートストラップ 3 の折りたたみ時にグリフィコンイメージ スワップを探しています。ここでこのスレッドを見つけましたブートストラップ 3 シェブロン アイコンで状態を折りたたむ上から下へ。足りないものはありますか？これを Bootstrap 3 の完全ダウンロード バージョンに配置したところ、アイコンのスワップアウトに失敗しました。コードは次のとおりです。

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1 
    </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high...
  </div>
</div>
</div>
</div>
</div>

ここにjsがあります：

$('#accordion .accordion-toggle').click(function (e){
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down       glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
4

1 に答える 1

3

私の同僚がちょうどこの問題を抱えていて、私にこの質問を指摘してくれました。私が彼に与えた解決策は次のとおりです。

HTML:

<div class="panel-group move-down" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                    <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
                </h4>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
            ...
            </div>
        </div>
    </div>
</div>

JavaScript:

$.fn.accordionChevrons = function() {
    return this.each(function(i, accordion) {
        $(".accordion-toggle", accordion).click(function(ev) {
            var link = ev.target;
            var header = $(link).closest(".panel-heading");
            var chevState = $("i.indicator", header)
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
            $("i.indicator", accordion)
                .not(chevState)
                .removeClass("glyphicon-chevron-down")
                .addClass("glyphicon-chevron-up");
        });
    });
};

$('#accordion').accordionChevrons();

この方法では、シェブロンをヘッダーのどこにでも配置できるため、シェブロンをクリックしてパネルを切り替えることもできます。また、シェブロンが互いに干渉することなく、同じページに複数のアコーディオンを配置することもできます。

于 2014-04-25T16:42:34.760 に答える