Bootstrap: Effondrement/expading avec les icônes problème

J'utilise bootstrap bibliothèque JavaScript et de le faire fonctionner de développer/réduire élément. Le code se présente comme suit:

<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>

Comme vous pouvez le voir, j'ai été en mesure de montrer la flèche déroulante de l'icône. Lorsque je clique sur l'accordéon élément le texte s'étend vers le bas ce que je voulais, mais j'ai besoin de flèche déroulante de l'icône de flèche de l'icône du moment, et vice versa, quand on clique accordéon élément à l'effondrement de texte pour afficher la flèche déroulante de l'icône de nouveau.

Comment faire?

OriginalL'auteur tesicg | 2013-10-21

  1. 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 Fiddle: http://jsfiddle.net/uBzeZ/1/

    Il n'y a pas de bascule de la flèche de la classe dans le bootstrap de la bibliothèque.
    Il y a 2 classes de bootstrap.css: .icon-arrow-up { background-position: -289px -96px; } et .l'icône de flèche vers le bas { background-position: -312px -96px; }
    Je sais qu'il ne l'est pas. J'ai fait cette classe, puis l'utiliser pour basculer l'image de flèche basée sur la présence d' .l'effondrement
    Ce qui se passe lorsque j'utilise votre code? Lorsque j'ouvre la page avec le code de démarrage, le titre "E-TICKET" et la flèche déroulante de l'icône sont là, qui est très bien. Lorsque je clique sur le titre "E-TICKET" après cela, le texte développe, mais l'icône reste flèche vers le bas, pas de flèche. Lorsque je clique sur le titre "E-TICKET" de nouveau à l'effondrement, le texte s'effondre, et l'icône se transforme en flèche, ce qui n'est pas correct. Il devrait y avoir flèche déroulante de l'icône.
    Ainsi, l'icône est le basculement, mais pas dans le bon sens, car il n'a pas changé sur le premier clic.

    OriginalL'auteur Kevin Bowersox

  2. 1

    Kevin réponse fonctionne très bien! La grande chose au sujet de sa réponse est qu'il fonctionne aussi avec Bootstrap 2, à la différence de certains autres réponses que j'ai trouvé (par exemple Bootstrap 3 Effondrement de l'état d'affichage avec Chevron icône).

    Pour répondre à votre question tesicg, ce que Kevin Bowersox est fait, c'est un sprite css technique, profitant de l'amorçage sprite.

    Découvrez http://css-tricks.com/css-sprites/ pour un lien vers un excellent outil d'explication et de sprites.

    Personnellement, je, voulais utiliser chevron icônes au lieu de cela, j'ai donc modifié Kevin réponse comme:

    /** 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;
}

    Fondamentalement, ce que j'ai fait a été de décalage de la "fenêtre" de pixels, si vous voulez, pour exposer le chevron partie du sprite à la place des flèches haut/bas.

    J'ai aussi ajouté le pull-droit classe de façon à ce que les icônes sont à l'extrême-droite de l'accordéon tête, comme suit:

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

    Merci Kevin, cela a permis un tas!

    OriginalL'auteur user2213334