4

ブートストラップ JavaScript ライブラリを使用して、折りたたみ/展開要素を機能させました。コードは次のようになります。

<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="color:firebrick; font-size: large;">
                        E-TICKET...
                    </a>
                    <i class="icon-large icon-arrow-down"></i>
                </h1>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    Some text...
                </div>
            </div>
        </div>
    </div>
</div>

ご覧のとおり、下矢印アイコンを表示できました。アコーディオン要素をクリックすると、テキストが必要なものに展開されますが、アコーディオン要素をクリックしてテキストを折りたたんで矢印を表示するときに、その瞬間に矢印ダウンアイコンを矢印アップアイコンに切り替える必要があります-再びアイコン。

どうやってするの？

4

2 に答える 2

4

CSS

/** 
    Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap.
**/

.toggle-arrow{
    background-position: -289px -96px;
}

/** 
    This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian.
**/

.collapsed .toggle-arrow{
    background-position: -312px -96px;
}

HTML

<!-- Nested the i tag within the a toggle by collapsed -->
<div class="panel-heading">
    <h1 class="panel-title">
        <!-- Initialized a with class="collapsed" -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
              style="color:firebrick; font-size: large;" class="collapsed">
            E-TICKET...
            <i class="icon-large toggle-arrow"></i>
        </a>
    </h1>
</div>

JS フィドル: http://jsfiddle.net/uBzeZ/1/

于 2013-10-21T09:29:15.193 に答える
1

ケビンの答えはうまくいきます！彼の答えの素晴らしい点は、私が見つけた他のいくつかの答えとは異なり、Bootstrap 2 でも機能することです (例: Bootstrap 3 Collapse show state with Chevron icon )。

あなたの質問 tesicg に答えるために、Kevin Bowersox が行っているのは、ブートストラップ スプライトを利用した CSS スプライト テクニックです。

優れたツールへのリンクとスプライトの説明については、http://css-tricks.com/css-sprites/をご覧ください。

個人的には、代わりにシェブロン アイコンを使用したかったので、Kevin の回答を次のように変更しました。

/** Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap. **/
.toggle-arrow{
    background-position: -312px -116px;
}

/** This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian. **/
.collapsed .toggle-arrow{
    background-position: -454px -72px;
}

基本的に、私がしたことは、必要に応じて「ビューポート」ピクセルをシフトして、上/下矢印の代わりにスプライトのシェブロン部分を公開することでした。

次のように、アイコンがアコーディオンの見出しの右端に表示されるように、プル ライト クラスも追加しました。

<i class="icon-large toggle-arrow pull-right"></i>

ありがとうケビン、これはたくさん役に立ちました！

于 2014-05-13T15:29:45.923 に答える