16

私はブートストラップからこのアコーディオンのものを持っています。矢印アイコンは下向きです。

ここに画像の説明を入力

次に、コンピテンシー 1 をクリックすると、(コンピテンシー 1 アイコンが上に、コンピテンシー 2 アイコンが下に)が表示されます。

ここに画像の説明を入力

しかし、ここで Competency2 をクリックすると、次のようになります (Competency1 アイコンはまだアップしていますが、Competency2 アイコンはアップしています):

ここに画像の説明を入力

これはブートストラップのバグですか、それとも簡単に修正できますか?

ありがとう。

4

5 に答える 5

36

コードを見ずに提案を提供することは困難です。「show」イベントでのみ画像スワップをトリガーしている可能性があります (js のタイプミスを確認してください)。

私のサイトで同じ効果を生み出すために私が使用するものは次のとおりです。

HTML:

<div class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #1
            </a>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #2
            </a>
        </div>
    </div>
</div>

JavaScript:

$('.accordion').on('show hide', function (n) {
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});
于 2013-02-18T02:10:15.297 に答える
1

これは、Competency1 が既に開いているときに Competency2 をクリックすると Competency1 が折りたたまれるために発生しているようです。Competency1 がこのように折りたたまれたときに発生するクリック イベントがないため、キャレットはまだ上向きです。

于 2013-02-14T22:00:21.743 に答える
0

jquery.js 1.10.2 と bootstrap-collapse.js v2.3.0 を使用して、これは上記の焼き直しです。ドキュメントをロードすると、最初のアイテムを除くすべてのアイテムが折りたたまれ、その後の表示/非表示イベントが処理されます。

$(document).ready(function () {

    $(".accordion-body").on("shown", function (evt) {
        setIcon(evt.target, true);
    });

    $(".accordion-body").on("hidden", function (evt) {
        setIcon(evt.target, false);
    });

    $(".accordion-body").collapse("hide");
    $("#collapse-faq-1").collapse("show");
});

function setIcon(acdBody, isShown) {
    var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-"));

    if (!isShown) {
        $("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down");
    } else {
        $("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up");
    }
}

HTML:

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
                <i id="indicator-1" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 1
            </a>
        </div>
        <div id="collapse-faq-1" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 1 ...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
                <i id="indicator-2" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 2
            </a>
        </div>
        <div id="collapse-faq-2" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 2 ...
            </div>
        </div>
    </div>
</div>
于 2014-06-20T03:06:20.470 に答える