Ändern des CSS-Hintergrundbildes in zusammenklappbarem div mit Javascript / jQuery - Javascript, Jquery, CSS

Ich bin auf der Suche nach etwas JavaScript, arbeite mit jQuery an einer reduzierbaren Liste und möchte ein Hintergrundbild in einer CSS-Datei in Abhängigkeit vom Status der Liste ändern

Dies ist der HTML-Code für die Div

<div class="collapse_div">
<div class="header_div">header text</div>
<div class="content_div">
Some text
</div>
<div class="header_div">another header</div>
<div class="content_div">
some more text
</div>
</div>

Dies ist die CSS-Datei, mit der das Bild (extended.gif) in den Header div eingefügt wird

 .collapse_div{
margin: 0;
padding: 0;
width: 500px;
}

.header_div {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(expanded.gif) no-repeat 95%;
background-color:#ccc;
}

.content_div {
padding: 5px 10px;
background-color:#fafafa;
}

Und dies ist die Javascript-Funktion, die das Erweitern / Reduzieren steuert, wenn auf header_div geklickt wird

    jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500);
});
});

Ich habe versucht, dem Code hinzuzufügen.Klicken Sie auf (Funktion), um zu versuchen, das Hintergrund-CSS-Tag in .header_div in eine andere Datei zu ändern (collapse.gif), aber ich kann es nicht zum Laufen bringen

Im Moment funktioniert das Ein- und Ausblenden des Divs einwandfrei, wenn sich das Hintergrundbild beim Klicken ändert, sieht es wirklich gut aus

Antworten:

4 für die Antwort № 1

Sie können eine Klasse mit dem erforderlichen Hintergrund festlegen und diese Klasse unter bestimmten Bedingungen anwenden. Versuche dies

CSS

.header_div_collapsed {
background: url(collapse.gif) no-repeat 95% !important;
}

JS

jQuery(document).ready(function() {
jQuery(".content_div").hide();

//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500, function(){
var $this = $(this);
if($this.is(":visible")){
$this.removeClass("header_div_collapsed");
}
else{
$this.addClass("header_div_collapsed");
}
});
});
});

---

2 für die Antwort № 2

Ihr Skript sollte etwa so aussehen,

    jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
var elm = jQuery( this );
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(":visible"))
jQuery(elm).css({"background-image" : "collapse.gif"});
else
jQuery(elm).css({"background-image" : "expand.gif"});
});
});
});

---

1 für die Antwort № 3

Dank der beiden unten aufgeführten Vorschläge konnte ich dies zum Laufen bringen

erstens habe ich eine neue css - funktion hinzugefügt, da das definieren des hintergrunds nicht funktioniert hat

  .expand_div_collapsed {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(collapsed.gif) no-repeat 95%;
background-color:#ccc;
}

dann wurde das JS darauf umgestellt

jQuery(document).ready(function() {
jQuery(".content_div").hide();

//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
var co = jQuery(this);
jQuery(this).next(".content_div").slideToggle(500, function(){

if(jQuery(this).is(":visible")){
jQuery(co).addClass("expand_div_collapsed");
}
else{
jQuery(co).removeClass("expand_div_collapsed");
}
});
});
});

Die Aufrufe zum Hinzufügen und Entfernen von Klassen mussten vertauscht werden, und ich musste die var co vor dem slideToggle-Aufruf definieren

aber danke an alle, die vorschläge gemacht haben, da ich das sonst nie zum laufen gebracht hätte

---