web-dev-qa-db-fra.com

L'icône accordéon Twitter Bootstrap ne change pas

J'ai ce truc d'accordéon de bootstrap. Les icônes fléchées indiquent en bas .

enter image description here

Puis je clique sur Compétence1, je reçois (icône Compétence1 haut , icône Compétence2 bas ):

enter image description here

Mais si je clique sur Compétence2 maintenant, je reçois (l’icône Compétence1 est toujours active , icône Compétence2 active ):

enter image description here

Est-ce un bug dans le bootstrap, ou cela pourrait-il être facilement corrigé?

Merci.

twitter-bootstrapaccordion
16
monstro

Il est difficile de faire des suggestions sans voir votre code. Vous pouvez déclencher l’échange d’image uniquement sur l’événement 'show' (recherchez les fautes de frappe dans votre js).

Voici ce que j'utilise pour créer le même effet sur mes sites:

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');
});
35
Zoe

Il semble que cela se produise car le fait de cliquer sur la compétence 2 réduit la compétence 1 lorsque la compétence 1 est déjà ouverte. Comme il n'y a pas d'événement de clic qui ne se produit sur la compétence 1 lorsqu'elle s'est effondrée de cette manière, le curseur d'insertion est toujours orienté vers le haut.

1
F0rgiven

À l’aide de jquery.js 1.10.2 et de bootstrap-collapse.js v2.3.0, il s’agit d’une nouvelle présentation de ce qui précède. Lors du chargement du document, il réduit tous les éléments sauf le premier, puis gère les événements d'affichage/masquage subséquents.

$(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>
0
user2045407

Vous pouvez utiliser ce code pour changer les icônes.

Partie de script: 

jQuery('document').ready(function() {

$('.accordion').on('show hide', function (n) {
    var targetEle = $(n.target).siblings('.accordion-heading').find('.accordion-toggle');
    if($(n.target).hasClass("in")){
        targetEle.children(".icon-chevron-down").show();
        targetEle.children(".icon-chevron-up").hide();
    }
    else{
        targetEle.children(".icon-chevron-down").hide();
        targetEle.children(".icon-chevron-up").show();
    }

});

});

Remarque: pour utiliser ce code, dans la partie html, vous devez inclure les deux balises d'image, c'est-à-dire. chevron-up et chevron-down.

0
Ravi

C'est un bug dans le bootstrap. Si vous inspectez votre balisage lorsque vous basculez sur l'un des en-têtes ayant une classe .accordion-toggle, l'activation ou la désactivation de la classe est désactivée. Lorsque vous cliquez sur un en-tête différent de celui qui est ouvert, il n’ajoute pas la classe d’effondrement à l’en-tête de l’élément ouvert. Cela a résolu le problème pour moi:

$('.accordion-toggle').click(function() {
    if($(this).hasClass('collapsed')) {
        $('.accordion-toggle').not(this).addClass('collapsed');
    }
});
0
geoffs3310