Bildquelle wechseln onclick accordion

Question

Ich muss Plone4 bei der Arbeit verwenden, was der Entwicklung viele Einschränkungen auferlegt. Die aktuelle Bootstrap-Version auf unserer Plone-Installation ist 2.3.2. Auf Wunsch habe ich eine Seite mit einigen Zeilen des Textes erstellt, die klickbar sind, um ein Akkordeon-Panel zu haben. Neben dem Text habe ich einen Dropdown-Pfeil, der die Richtung ändert, je nachdem, ob das Akkordeon-Panel geöffnet ist oder nicht. Die einzige Sache, mit der ich nicht zufrieden bin, ist die Tatsache, dass, wenn Sie auf ein anderes Akkordeonfeld klicken, das Pfeilbild auf dem zuvor geöffneten gleich bleibt. Gibt es eine Möglichkeit, dieses Verhalten zu beheben? Mein Code:

HTML:

<div class="accordion-group top"> 
    <div class="accordion-heading"> 
    <a id="collapse01" class="accordion-toggle" data-toggle="collapse" data-parent="#timeline-accordion" href="#preferred-name">Indicate "Preferred Name" in HR Self-Service<img id="arrow01" src="/arrow-down" alt="Indicates a dropdown for additional information" /> 
    </a>   
    <div class="green-bg-gradient color-block col-9 jan16"></div>  
    </div><!-- /heading --> 
    <div id="preferred-name" class="accordion-body collapse"> 
    <div class="accordion-inner">Completed 10/06/16</div>  
    </div><!-- /collapsed --> 
    </div><!-- /group --> 

jQuery:

jqbs("a#collapse01").click(function() { 
    if (jqbs('img#arrow01').attr('src')==='/arrow-up') { 
    jqbs('img#arrow01').attr('src', '/arrow-down') 
    } else { 
    jqbs('img#arrow01').attr('src', '/arrow-up') 
    } 
    }); 

Vielen Dank für Beratung im Voraus!

Answer 1

Wenn Sie Ihre Bilder eine Klasse geben, etwa wie folgt:

<img id="arrow01" class="arrow" src="/arrow-down" alt="Indicates a dropdown for additional information" /> 

dann können Sie das Klick-Ereignis behandeln und den Pfeil in geeigneter Weise auf jedem Satz. Dies funktioniert, weil, wenn das Akkordeon zum Öffnen eines Panels angeklickt wird, es annimmt, dass alle anderen geschlossen sind, so dass es alle Pfeile geschlossen hat, und dann zuletzt dasjenige öffnet, das sich auf das gerade angeklickte Panel bezieht.

Beachten Sie auch, dass ich das Klickereignis geändert habe, um Klicks auf alle Akkordeonbedienfelder zu bearbeiten. Ihr vorhandenes Beispiel wurde nur mit dem obersten Feld behandelt, da es eine ID und keine Klasse verwendet.

jqbs(".accordion-toggle").click(function() { 
    if (jqbs('.arrow', this).attr('src') === "arrow-up") { //this panel is already open 
     jqbs('.arrow', this).attr('src', '/arrow-down'); //show down arrow (for closed panels) 
    } 
    else { //open this panel 
     jqbs('.arrow').attr('src', '/arrow-down'); //make them all look closed 
     jqbs('.arrow', this).attr('src', '/arrow-up'); //make this one look open 
    } 
}); 

Answer 2

Ich weiß nicht, ob Sie jQuery verwenden können. Es könnte mit CSS-Selektor erfolgen:

$('img[src=/arrow-up]').attr('src', '/arrow-down'); 

Setzen Sie diesen Code in das Click-Ereignis, können Sie alle Pfeile ändern bis Pfeile nach unten, dann können Sie das Ereignis Fokus ändern von unten nach oben.